Vue 组件（包括 Inertiajs-Link）在项目中不起作用

发布于 2025-01-12 20:37:03 字数 1060 浏览 4 评论 0原文

我将使用 Vue 组件构建小型 UI 库包，并在我的 Inertia-Laravel 项目中使用它。

//Logo.vue

<template>
    <Link href="/" class="text-xl font-bold flex items-center lg:ml-2.5">
        My Logo
    </Link>
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
export default {
    name: "Logo", 
    components: {
        Link,
    },
}
</script>

我能够将其构建为包 Vite 或 Vue-SFC-RollUp 并将其发布到 npm 上。

但是当我打算将它安装到我的惯性/Laravel 项目并使用它时，我收到了一些警告和错误。

MyProjectComponent.vue

<template>
...
<Logo />
...
</template>
<script>
import {Logo} from 'mypackage-ui'

export default {
components: {Logo}
}
</script>

错误消息：

export 'default' (imported as  'require$$1') was not found in 'vue' 
(possible exports: BaseTransition, Comment, EffectScope, ... , withScopeId)

如果我删除 Logo.vue 中的并使用标记并更新包，那么它运行良好。

任何建议将不胜感激。我正在使用 Vue 3。

原文

I'm going to build small UI library package with Vue components and use it in my Inertia-Laravel Project.

//Logo.vue

<template>
    <Link href="/" class="text-xl font-bold flex items-center lg:ml-2.5">
        My Logo
    </Link>
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
export default {
    name: "Logo", 
    components: {
        Link,
    },
}
</script>

I was able to build this as package Vite or Vue-SFC-RollUp and publish it on npm.

But when I was going to install it on my inertia/laravel projects and use it, I got some warning and error.

MyProjectComponent.vue

<template>
...
<Logo />
...
</template>
<script>
import {Logo} from 'mypackage-ui'

export default {
components: {Logo}
}
</script>

Error message:

export 'default' (imported as  'require$1') was not found in 'vue' 
(possible exports: BaseTransition, Comment, EffectScope, ... , withScopeId)

If I remove <Link> in Logo.vue and use <a> tag and update package, then it's working well.

Any suggestion would be highly appreciated.
I'm using Vue 3.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紅太極 2025-01-19 20:37:03

解决方案是将惯性链接作为组件添加到 app.js 文件中：

import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .use(ZiggyVue, Ziggy)
            .mount(el);
},

});

The solution to this is to add the inertia link as a component in the app.js file:

import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .use(ZiggyVue, Ziggy)
            .mount(el);
},

});

回复收藏 0 原文

~没有更多了~