I am new with laravel + vue. I'm using metronic template. I finish to do the integration Vue in project Laravel. But I have one problem, the application works but It doesn't read vuetify-component. Nothing error in console of browser. Anyone know how I resolve the problem?
\resources\js\src\main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "@/core/services/store";
import ApiService from "@/core/services/api.service";
import MockService from "@/core/mock/mock.service";
import { VERIFY_AUTH } from "@/core/services/store/auth.module";
import { RESET_LAYOUT_CONFIG } from "@/core/services/store/config.module";
Vue.config.productionTip = false;
// Global 3rd party plugins
import "popper.js";
import "tooltip.js";
import PerfectScrollbar from "perfect-scrollbar";
window.PerfectScrollbar = PerfectScrollbar;
import ClipboardJS from "clipboard";
window.ClipboardJS = ClipboardJS;
// Vue 3rd party plugins
import i18n from "@/core/plugins/vue-i18n";
import vuetify from "@/core/plugins/vuetify";
import "@/core/plugins/portal-vue";
import "@/core/plugins/bootstrap-vue";
import "@/core/plugins/perfect-scrollbar";
import "@/core/plugins/highlight-js";
import "@/core/plugins/inline-svg";
import "@/core/plugins/apexcharts";
import "@/core/plugins/metronic";
import "@mdi/font/css/materialdesignicons.css";
// API service init
ApiService.init();
// Remove this to disable mock API
MockService.init();
router.beforeEach((to, from, next) => {
// Ensure we checked auth before each page load.
Promise.all([store.dispatch(VERIFY_AUTH)]).then(next);
// reset config to initial state
store.dispatch(RESET_LAYOUT_CONFIG);
// Scroll page to top on every route change
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
});
new Vue({
router,
store,
i18n,
vuetify,
render: h => h(App)
}).$mount("#app");
resources/js/src/App.vue
<template>
<v-app>
<router-view></router-view>
</v-app>
</template>
<style lang="scss">
// 3rd party plugins css
@import "~bootstrap-vue/dist/bootstrap-vue.css";
@import "~perfect-scrollbar/css/perfect-scrollbar.css";
@import "~socicon/css/socicon.css";
@import "~@fortawesome/fontawesome-free/css/all.css";
@import "~line-awesome/dist/line-awesome/css/line-awesome.css";
@import "assets/plugins/flaticon/flaticon.css";
@import "assets/plugins/flaticon2/flaticon.css";
@import "assets/plugins/keenthemes-icons/font/ki.css";
// Main demo style scss
@import "assets/sass/style.vue";
// Check documentation for RTL css
// Update HTML with RTL attribute at public/index.html
/*@import "assets/css/style.vue.rtl";*/
@import "~vuetify/dist/vuetify.min.css";
@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");
</style>
<script>
import { OVERRIDE_LAYOUT_CONFIG } from "@/core/services/store/config.module";
export default {
name: "MetronicVue",
mounted() {
/**
* this is to override the layout config using saved data from localStorage
* remove this to use config only from static json (@/core/config/layout.config.json)
*/
// this.$store.dispatch(OVERRIDE_LAYOUT_CONFIG);
}
};
</script>
resources/app.js
require("./bootstrap");
require("./src/main.js");
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}"/>
<title>Laravel Vue</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<app></app>
</v-app>
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Someone have some suggest? I followed all steps of documentation of Metronic Laraval+vue Integration.
Finally I resolve that problem! I forgot to use vuetify inside app.js
app.js
app.blade.php