Vuetify: [Documentation] Install Vuetify on Laravel

[upathissa]

Problem to solve

It is extremely difficult to install vuetify on laravel at this moment.

Proposed solution

Update documentation for Laravel as well.

[upathissa]

I'm trying to install Vuetify on the Laravel 6 project. But it doesn't work as usual while I'm following the steps in documentation under "Webpack install" section. It shows a tons of errors on console like
"app.js:41253 [Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

But after changing import Vuetify from 'vuetify/lib' to import Vuetify from 'vuetify it renders the page without any js errors. But it didn't load styling correctly.

(Actually, I didn't follow the "webpack.config.js" configuration step. It is a little bit difficult thing to do it on laravel for me.)

[DRoet]

FYI this is a pretty good starter-project that works with vuetify 2.x

https://github.com/nekosaur/laravel-vuetify

[nicomoya123]

I am using it on my personal laravel project.
I can upload a basic working template if you want to look at it

[rajhaq]

put this in plugins/vuetify.js

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

[Nothing-Works]

@upathissa do you want to try this.
I create a package. It does everything for you.

You can try it, and let me know if it's working for you.

And here is laravel setup

It's also on laravel-mix.com

[MajesticPotatoe]

@Nothing-Works Would say laravel instructions can be added to quick start if you are looking to help provide the docs. Seems pretty straight forward, install laravel, laravel-mix package, configure, and then bootstrap vuetify like normal.

[Nothing-Works]

@MajesticPotatoe yes, I would like to help. just one thing there are some overlapping steps between laravel and webpack install like:

// src/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

// src/main.js

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

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

Also for font install. Do you think that It's ok to duplicate these? Or do you have some recommendations? Thanks.

[MajesticPotatoe]

For those you could simply refer to the already existing steps or just reuse the snippet

[Hazard4233]

I have read your articles carefully.
I have same problems for integrating vuetify on laravel 7
Please send me correct way for vuetify and laravel
thanks

[Nothing-Works]

@Hazard4233 check https://github.com/Nothing-Works/vuetifyjs-mix-extension and https://github.com/Nothing-Works/vuetifyjs-mix-extension/blob/master/laravel.md