I have installed vue 3 with vuetify alpha version for vue 3 using vite. But almost none of the UI components works correctly. The colors are diferent, even if I copy-paste the template and script tags for the respective UI component.
For example this is how it looks for me:
And this is how it looks on their website:
AM I doing something incorrectly ? Or is it really incompatible and not reliable with vue 3
The upgrade is not very straightforward because a lot of props has been changed. And the documentation for vuetify 3 is outdated so you can't just copy and paste from the documentation. Currently, I'm a afraid that you should look into the source code to figure it out.
Related
I started working on a new Laravel, Vue and inertiaJS project and I'm using VS code editor. The problem I'm having is that Vetur isn't getting that I'm using Inertia not pure Vue components; therefore, It keeps on highlighting everything in red because It assumes that everything is unidentified and unknown.
The below image is to demonstrate what I mean:
Is there a way I can work with InertiaJS on VS Code without having these disturbing errors everywhere and see only valid errors?
Vetur is deprecated, which is likely the cause of the problem. Switch to Volar.
From the Vue docs:
TIP
Volar replaces Vetur, our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
Installed Backpack on a fresh Laravel install. Maybe I'm missing something but is it normal for the views Backpack adds to have no CSS? It's pure HTML with no formatting. I've watched videos of people installing it and they show the webpage properly formatted.
You are correct, if properly inatalled Backpack does come with CSS and JS. To get it, you should follow the installation steps in the documentation.
One important step that you might have missed is “php artisan backpack:install”, which will also publish the needed CSS and JS.
When I create a fresh vue-cli project via this command
vue create hello-word
and this command to install vuetify
vue add vuetify
Then I saw my git changes like this
Two new dependencies have been installed in package.json.
vue-cli-plugin-vuetify
vuetify-loader
At first glance, I thought vue.config.js has specified using these two, but it's content only have these code.
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
So, how does vue-cli know I've installed this new vuetify loader?
Does it automatically pick those up?
After running vue add vuetify choose Vuetify 3 if you are using Vue 3:
vuetify-loader is a treeshaking plugin for Webpack. It gets installed automatically when you install Vuetify using "vue add vuetify".
So, vuetify-loader is used by Webpack for treeshaking the Vuetify components to only include the ones that you imported in your app. This way Webpack should be able to lower your build size by importing only the required components, and not all the Vuetify components.
See Vuetify Treeshaking
And this is the vuetify-loader project on Github
I need to have over 10 language in my Nativescript-vue app. I have looked at "vue-i18next" but i don't understand how it works with single file components. I don't understand how it will work if i have exempel app.vue, register.vue, login.vue and so on.. The docs didn't show how to do it on single file components.
Can someone give me a example with nativescript-vue "vue-i18next" or another language plugin? Just show me one single file component how its done ;)
I specifically mean the reactJS & material-ui project:
http://www.material-ui.com/
searching on theme-forest etc. doesn't turn up anything.
there are themes that use other front-end material design packages
such as:
http://preview.themeforest.net/item/materio-material-design-mobile-app-landing-page/full_screen_preview/10910350
^ materializecss
or
http://www.strapui.com/product-category/react.js-themes/
^ react + bootstrap
Converting the JS components to a different library seems like a whole lot of work... same as building from scratch really.
Thanks for any suggestions or quick ways to get a designed layouted site up and running!