Question 15540 in Laravel Question posted in
The official Laravel Documentation can be found here.

how to set up Laravel 9 project with Vuetify and Vite

Question:

I’m currently working on a Laravel 9 project with Vite and I’m trying to integrate Vuetify into it. I’ve followed the instructions on the Vuetify documentation, but the styles are not being applied

app.js

import App from "./App.vue";

// Vuetify
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

const vuetify = createVuetify({
    components,
    directives,
});

createApp(App).use(vuetify).mount("#app");

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [vue(), laravel(["resources/css/app.css", "resources/js/app.js"])],
});

plugins/vuetify.js

import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";

const vuetify = createVuetify({
    ssr: true,
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution, edit app.js and add lines

    import { createApp } from "vue";
import App from "./App.vue";

//add this
import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
//

// Vuetify
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

const vuetify = createVuetify({
    components,
    directives,

//and this
    icons: {
        defaultSet: "mdi",
        aliases,
        sets: {
            mdi,
        },
    },
//

});

createApp(App).use(vuetify).mount("#app");

  2. 0

    Do you have your JS and CSS files integrated in your view?

    In the head tag put the following line:

     @vite('resources/path/to/app.css') 
 @vite('resources/path/to/app.js')

    Now the vite will be implemented in your view and styles should apply!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search