CODEWITHSUNDEEP
laravelvue.jsvuetify.js
user761100
user761100

Reputation: 2317

How to Install Vuetify in a Laravel 9 Project

I am having difficulty installing Vuetify on a Laravel 9 Project that is using Vue (2.6). (It is not using Jetstream)

As per https://vuetifyjs.com/en/getting-started/installation/#webpack-install, I used

 npm install vuetify
 npm install sass@~1.32 sass-loader deepmerge -D

However, I am lost at the next instruction(s) about webpack.config.js and src/plugins/vuetify.js. Could someone please explain, what are the next steps and what changes I need to make in resources/js/app.js to use Vuetify components?

Upvotes: 0

Views: 2408

Answers (2)

Atlas-Pio
Atlas-Pio

Reputation: 1153

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.

Upvotes: 2

Donkarnash
Donkarnash

Reputation: 12835

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

Upvotes: 1

Related Questions