Laravel Nova 中的自定义 Vue 组件

Posted

技术标签:

【中文标题】Laravel Nova 中的自定义 Vue 组件【英文标题】:Custom Vue Component in Laravel Nova 【发布时间】:2020-08-08 17:23:48 【问题描述】:

我有一个位于 Laravel 默认路径中的自定义 Vue 组件:

resources/js/components/MyComponent.vue

所以,我安装了 Laravel-Nova 并想在部分视图中使用该组件

resources/views/vendor/nova/partials/user.blade.php
<dropdown-menu slot="menu"  direction="rtl">

    <my-component></my-component>

    <ul class="list-reset">
        <li>
        ...

我应该在哪里导入组件?换句话说,我应该在哪里放置:

import MyComponent from '/path/to/my/component/MyComponent.vue'

//and

Vue.component('my-component', MyComponent)

我想以某种方式在 Vue 组件的代码中使用 Nova javascript Helpers,例如:

this.$toasted.show('It worked!',  type: 'success' )

//or

axios.get('/nova-vendor/stripe-inspector/endpoint').then(response => 
    // ...
)

【问题讨论】:

【参考方案1】:

这是一个类似组件的示例:

import MyLens from './components/views/Lens';

Nova.booting((Vue, router, store) => 
    router.addRoutes([
            name: 'nova-improvements',
            path: '/nova-improvements',
            component: require('./components/Tool'),
        ])
);
Nova.booting((Vue, router, store) => 
    Vue.component('lens', MyLens)
);

【讨论】:

以上是关于Laravel Nova 中的自定义 Vue 组件的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Nova自定义工具创建:vue组件不刷新

从 Laravel 中的 .env 获取 .data 到 Laravel Nova Card - vue 组件

Laravel 5.6.7 和 Vue.js 中的自定义错误消息,尤其是组件

如何在 laravel nova 中创建可重用的 vue 组件?

Laravel Nova 覆盖 vue 组件导致 [Vue 警告]:编译模板时出错

Laravel Nova 自定义字段获取模型值