How to implement vuetify in laravel?

Question

I'm new with vuetify and i trying to implement it in laravel.

Does someone have already implement vuetify in laravel and could tell me how?

i have already install with

npm install vuetify

and try this in App.scss

@import '~vuetify/dist/vuetify.min.css';

This is my app.js file

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
Vue.use(VueRouter)


// parents componenets
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('example', require('./components/example.vue'));

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

but when i try to use some vuetify components it doesn't work.

This is my component.

<template>
  <v-app id="inspire" dark>
    <v-navigation-drawer
      clipped
      fixed
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-tooltip right>
            <v-btn icon large :href="source" target="_blank" slot="activator">
              <v-icon large>code</v-icon>
            </v-btn>
            <span>Source</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app fixed>
      <span>&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      drawer: null
    }),
    props: {
      source: String
    }
  }
</script>

and try this in App.scss

@import '~vuetify/dist/vuetify.min.css';

but when i try to use some vuetify components it doesn't work.

Solution

I will give you all steps to implement vuetify in laravel

-1 run npm command to install vuetify in your laravel project

npm install vuetify

-2 go to app.js file and add this code

import Vuetify from 'vuetify';
   Vue.use(Vuetify); 

   const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
   
});

-3 go to app.scss file and add this code

@import "~vuetify/dist/vuetify.min.css";

-4 and finally you can add this code in app.scss for vuetify fonts because if you do not add the following code you can not use vuetify fonts and it will not be displayed

 @import url('https://fonts.googleapis.com/css?family=Material+Icons');
   @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css');

hope this can be helpful for you

Comments

[Henry]

Thank you for this! I've been looking for this information for longer than I'd like to admit. It works and now I can finally combine Laravel, Vue AND Vuetify!!! Why isn't this documented properly somewhere in Laravel, Vue or Vuetify documentation? Or is it and I just failed to see it?

[Anthonius]

if we directly import vuetify/dist/vuetify.min.css, could we still override it with our own variables?