[Vuejs]-How to Install Vuetify in a Laravel 9 Project

by

1👍

✅

It is asking to make some changes to webpack.config.js. In Laravel, we don’t have this file.

You can probably try to use Laravel Mix’s override method (in webpack.mix.js)

mix.override(config => {
    config.modules.rules.push({
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
    })
})

Then create a file at resources/js/plugins/vuetify.js with the following content as per instructions on vuetify site

//resources/js/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

And include the plugin in your resources/js/app/js file

//resources/js/app/js


import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

Laravel Mix Docs – Quick Webpack Configuration

Laravel Mix Docs – API – Override Webpack Config

👤Donkarnash

2👍

You don’t need to change anything in Webpack, when you’re installing Vuetify in Laravel project, except regular Vue things like below :

webpack.min.js // located in laravel root directory
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

Create a directory in resources/js/plugins/vueity and in vuetify directory, create a new file index.js, and in index.js you can do :

import Vue from 'vue'
import Vuetify from 'vuetify'

import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

// opts options are optional, but I've added them as a simple.
const opts = {
    theme: { dark: true }, 
    rtl: true
}

export default new Vuetify(opts)

now in app.js :


import vuetify from './plugins/vuetify' // and import the js file

const app = new Vue({
    ...
    vuetify, // add this line
    ...
});

and then in root component or etc add v-app like below :

App.vue
<template>
 <v-app> // this tag as a root element in your vue app is necessary. 
      <v-alert
      border="right"
      color="blue-grey"
      dark
    >
      I'm an alert with a right border and blue-grey color
    </v-alert>
 </v-app>
</template>

And of-course by any chance, if you had any conflicts, you can use below dependencies :

    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.25",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vuetify": "^2.6.4"
    }

above dependencies are not all related to Vuetify but in-case you had conflict in versions, you can set version of libraries like above.

👤Atlas-Pio

Leave a comment