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.

Did you wrap your app in the v-app component like the docs suggest? — jostrander
– jostrander, Commented Feb 11, 2018 at 19:39
What does your JS look like? Vuetify is a component pack, not only CSS so you'll need to add their JS as well. — jostrander
– jostrander, Commented Feb 11, 2018 at 19:40
Do you get any errors in the console? I don't see anything immediately wrong. — jostrander
– jostrander, Commented Feb 11, 2018 at 20:05
Did you mount the router to #app? const app = new Vue({ router }).$mount('#app') ?? — jostrander
– jostrander, Commented Feb 11, 2018 at 20:08

Gruber · Accepted Answer · 2023-06-18 04:37:31Z

14

I will give you all steps to implement vuetify in laravel

run npm command to install vuetify in your laravel project
```
npm install vuetify
```

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(),

});

go to app.scss file and add this code

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

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

edited Jun 18, 2023 at 4:37

Gruber

2,3285 gold badges32 silver badges52 bronze badges

answered Jul 21, 2020 at 0:40

abdelhak51

5791 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Henry Over a year ago

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 Over a year ago

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

Uwe Allner · Accepted Answer · 2019-09-26 10:04:40Z

-1

I too had the same problem which solve with this

<body>
    <div id="admin" dark>
    <v-app id="inspire">
    ....
    </v-app>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
    </body>`

in the javascript

const app = new Vue({
el: '#admin'
...
});

edited Sep 26, 2019 at 10:04

Uwe Allner

3,4879 gold badges40 silver badges52 bronze badges

answered Mar 12, 2018 at 20:36

Elvis gil

132 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to implement vuetify in laravel?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related