CODEWITHSUNDEEP
cssvue.jsstylesvuetify.jslaravel-8
Tprogramer
Tprogramer

Reputation: 85

How to get vuetify styles to work in laravel 8?

I am doing a new project, and I would be needing to use the vuetify framework in laravel 8, pull the following commands for the installation of the libraries:

composer require laravel/ui
php artisan ui vue
npm i
npm i vuetify
npm i sass sass-loader deepmerge -D

I followed some documentation to install vuetify in laravel 8, next I show my package.json:

"devDependencies": {
    "axios": "^0.21",
    "bootstrap": "^4.0.0",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.2.2",
    "deepmerge": "^4.2.2",
    "jquery": "^3.2",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "popper.js": "^1.12",
    "postcss": "^8.1.14",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.32.8",
    "sass-loader": "^8.0.2",
    "vue": "^2.5.17",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.10"
},
"dependencies": {
    "vue-router": "^3.5.1",
    "vuetify": "^2.4.5",
    "vuex": "^3.6.2"
}

app.scss and app.js files:

/* app.scss */
@import url('https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css');
@import '~vuetify/dist/vuetify.min.css';
@import 'variables';

/* app.js */
require('./bootstrap');
window.Vue = require('vue').default;
import router from '@r/routes';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)
import RenderVue from '@/RenderVue';
new Vue({
  router,
  vuetify: new Vuetify(),
  render: (h) => h(RenderVue)
}).$mount('#app');

After all this installation, I tried to put a v-alert of type success and also a card that is in the vuetify documentation as an example, finally it renders the following:

enter image description here

We can see that vuetify is installed, because it recognizes the components, but the styles are not recognized, why can it be? In the app.css file it appears that the vuetify styles were generated. File app.css:

/*!
* Vuetify v2.4.5
* Forged by John Leider
* Released under the MIT License.

Upvotes: 0

Views: 1118

Answers (1)

Tprogramer
Tprogramer

Reputation: 85

Finally I was able to solve it, it was that it called the components, but for the styles to work correctly everything must be encapsulated within v-app

Upvotes: 2

Related Questions