Skip to content

Instantly share code, notes, and snippets.

@wtoalabi
Created December 19, 2019 10:16
Show Gist options
  • Save wtoalabi/e0bce4b3f67bd5a1c602755328e285ce to your computer and use it in GitHub Desktop.
Save wtoalabi/e0bce4b3f67bd5a1c602755328e285ce to your computer and use it in GitHub Desktop.
Vuetify Installation on Laravel Mix
let mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for your application, as well as bundling up your JS files.
|
*/
mix.webpackConfig({
resolve: {
alias: {
'@': path.join(__dirname, 'src/js'),
'node_modules': path.join(__dirname, 'node_modules')
}
}
});
mix.js('src/js/app.js', 'dist/js/')
.disableNotifications()
.options({
extractVueStyles: true,
})
.webpackConfig({
plugins: [new VuetifyLoaderPlugin()]
})
.sass('src/scss/app.scss', 'dist/css/')
.setPublicPath('dist');
@wtoalabi
Copy link
Author

In your entry js file (main.js or app.js), wherever you are instantiating Vue...add:
import vuetify from './plugins/vuetify'

This means you need to create a file called vuetify inside a plugin directory in your root...
You can choose anywhere.
Just create a file, link it as above and add the following code inside:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
theme: {
dark: false
}
})

What this object does is to help you customize your styles.
You can directly overide any default options from here.
Which is why I need it to be on a page of its own.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment