لا يتم التعرف على مكتبة Vuetify في لارافيل

Amir Alsaeed · 16 مارس 2021

لقد حاولت إضافة مكتبة vuetify على مشروع laravel 8 استخدم فيه Jetstream و Inertia، وهذا هو ملف resource/plugins/vuetify.js الخاص بالإضافة:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

وقمت بتضمينها ضمن ملف app.js:

import PortalVue from 'portal-vue';

Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(vuetify);

const app = document.getElementById('app');

new Vue({
   vuetify,
   render: (h) =>
      h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        },
    }),
}).$mount(app);

ولكنها مازالت لا تعمل. ما حل المشكلة؟

Sam Ahw · 16 مارس 2021

يجب أولاً تحميل المكتبة عن طريق npm كالتالي:

npm install vuetify

إضافة السطر التالي في تروسية ملف /resources/views/app.blade.php لكي يتم التعرف على الأيقونات الخاصة ب vuetify:

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

ثم في ملف /resources/js/app.js نضيف التالي فقط:

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)

مع التأكد بإضافتهم بعد Vue الأساسية بحيث يصبح شكل الملف كالتالي:

require('./bootstrap');

import Vue from 'vue';
import Vuetify from 'vuetify';

import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';

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

Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(Vuetify)

const app = document.getElementById('app');

new Vue({
    vuetify: new Vuetify(),
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

ويجب أيضاً التأكد من ملف webpack.mix.js أنه يحوي vuetify loader كالتالي:

const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
mix
.js('resources/js/app.js', 'public/js')

.webpackConfig({
  plugins: [
    new VuetifyLoaderPlugin()
  ],
})
.browserSync('tb8.test');