Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

leostereo's avatar

Add vuejs + vuetify to my laravel 8 running with sail script (for a fullstack developer)

Hi guys, I have some experience coding with laravel and vuejs but ... have not idea how does library loaders works. Currently im trying to add vuejs + vuetify to my laravel 8 project running with sail script. After reading a lot of tutorials , I got this working doing:

npm install --save vue
npm install vuetify

Then in my resources/js/app.js looks like this:

import Vue from 'vue'
import VueRouter from 'vue-router';
import router from './Router/index'
import store from './Store/index';
import App from './App.vue'

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';

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

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

then , my entry point in laravel view is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

    <title>{{env('APP_NAME')}}</title>
</head>
<body>
    <div id="app">
	<v-app>
		<app></app>
	</v-app>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

I got this working , however , in order to have a full vuetify working I must include the:

    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

line at the laravel entry point view , otherwise It does not work. So , I would like to know: Is there some working example/documentation about installing vue + vuetify to my laravel 8 project running with sail ? (I have been looking without success) How can I modify my project to avoid downloading vuetify from cdn ? I need to install them locally since some users will load it over a vpn without internet access.

Thanks, Leo.

0 likes
5 replies
leostereo's avatar

Mariano , gracias por tus palabras. I think this documentation is prepared for vuejs scaffolding. I already tryed but can not find the "src/plugins/vuetify.js" file under laravel files tree. Thanks.

MarianoMoreyra's avatar

Nada que agradecer @leostereo

Regarding the link, just pay attention to the material design part. Just run:

$ npm install @mdi/font -D

And the, at your resources\sass\app.scss file add the following:

// Material Design Icons
@import '~@mdi/font/css/materialdesignicons.min.css';

Finally run:

npm run dev

And you should be able to use the icons simply by adding something like this at your code:

<v-icon>mdi-view-dashboard</v-icon>
<v-icon>mdi-cog</v-icon>

Let me know if that worked for you!

1 like
leostereo's avatar

Mariano , I tryed , but did not work. I start to believe that my project is not propperly created , since Iooked into multiple tutorials .... and created a frankenstein mix.

, I also modified this file: webpack.mix.js. (did not mentioned before, and could be important).

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

It think it would be better to start again with a fresh project. It would be great if would be possilbe to use vue ui tool to set the front end , and then somehow add it to laravel. Leandro.

Please or to participate in this conversation.