Setup Laravel with Vue and Vuetify
Why Stack Overflow recommends it
Stack Overflow users link it as the step-by-step guide they followed to install Vue and Vuetify in Laravel, usually when they hit build errors or layout quirks afterwards.
Recommended by 0 people across 0 different months, 2020 to 2022.
What it is
A 14-minute screencast by Scrypster showing how to add Vue and the Vuetify component library to a Laravel application, including the webpack.mix.js configuration and a final check that a Vuetify button renders. It is a hands-on setup walkthrough rather than a course on Vuetify itself.
What people said
Cites Henry · 2020-03 · Stack Overflow · on “What files and folders should I have in Laravel if Vue and Vuetify is installed?”
That may sound like an odd question so let me explain why I ask it. I am just learning Laravel, Vue and Vuetify but I haven't found a coherent set of instructions that actually works for installing them except for this video. [this video] Based on the verification steps at the end, it appears that this procedure correctly installs Vue and Vuetify in Laravel. Unfortunately, I can't find any course on learning Vuetify in Laravel, although this playlist [LINK] seems pretty clear for a non-Laravel environment. Unfortunately, the playlist's installation instructions seem to result in a very different structure for the project which bears almost no resemblance to what I see in Laravel. And that is conf
Cites enriquetanada · 2021-03 · Stack Overflow · on “Invalid CSS after " @content": expected "}", was "($material-light);”
here is the sample picture [LINK] I still have an issue even if I followed the instruction in the tutorial I watched. here is my webpack.mix.js const mix = require('laravel-mix'); const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var webpackConfig = { plugins: [ new VuetifyLoaderPlugin(), new CaseSensitivePathsPlugin() ], } mix.webpackConfig( webpackConfig ); mix.js('resources/js/app.js', 'public/js') .vue() .sass('resources/sass/app.scss', 'public/css'); Also, my sass-loader I downgraded my sass-loader version from 8.0 to 7.1 here is my dependencies "sass": "^1.32.8", "sass-loader": "^7.1.0", "vu
Cites dev-x · 2021-06 · Stack Overflow · on “Prevent long empty space in bottom of vuetify component in laravel 8”
Currently I have a project which built using laravel 8 and I use vuetify for its component. I learned from this video [this video] . But, as we can see in minute 14.01 [this video] there is a long empty space in the bottom of primary button. How to prevent or fix it? I think its caused after adding the v-app tag, but if I don't add it the component will not be showed. So, what I can do to fix it? The example code and the result are below. <template> <v-app> <v-btn depressed color="primary"> Primary </v-btn> </v-app> </template> [LINK]
Cites Lynette García · 2022-05 · Stack Overflow · on “WARNING in vuetify/lib export 'default' (imported as 'Vue') was not found in 'vue'”
I installed Vuetify in a vue-laravel project. I'm not using vue cli. The node modules I installed were: vuetify vuetify-loader sass-loader I followed this tutorial: Setup Laravel with Vue and Vuetify [this video] I have this in my webpack.mix.js: const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin') var webpackConfig = { plugins: [ new VuetifyLoaderPlugin(), new CaseSensitivePathsPlugin() ] } In my plugins folder i have a file vuetify.js with this: import Vue from 'vue' import Vuetify from 'vuetify/lib' Vue.use(Vuetify) export default new Vuetify({ icons: { iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'f