Closed MatteoGauthier closed 2 years ago
oleksiikhr
commented
4 years ago Hi, the first time I see such errors, but this text:
Use equal casing. Compare these module identifiers:
...\node_modules\Vue\dist\...
...\node_modules\vue\dist\...Have you tried replacing it?
import Vue from 'Vue' on the import Vue from 'vue'
MatteoGauthier
commented
4 years ago Hey i tried to change from Vue to vue, i get the same issue
oleksiikhr
commented
4 years ago I just googled, everyone says that I wrote above. Mmm, have you tried restarting? :)
MatteoGauthier
commented
4 years ago Obviously i tried to restart :D, i've removed my node_modules folder, reinstalled packages, nothing change. My files :
nuxt.config.js
export default {
// ...
mode: "universal",
plugins: [
{
src: "~/plugins/menu" // i tried with mode:'client'
}
]
// ...
};menu.js
"use strict";
import Vue from "vue";
import VueStripeMenu from "vue-stripe-menu";
import "vue-stripe-menu/dist/vue-stripe-menu.css";
Vue.use(VueStripeMenu);NavBar.vue
<template>
<vsm-menu
:menu="menu"
:base-width="380"
:base-height="400"
:screen-offset="10"
element="header"
@open-dropdown="onOpenDropdown"
@close-dropdown="onCloseDropdown"
>
<template #default="data">
<div>{{ data }}</div>
</template>
<template #before-nav>
<li class="vsm-section">
<img src="/path/to/file" title="My Logo" />
</li>
</template>
<template #title="data">{{ data.item.title }}</template>
<template #after-nav>
<li class="vsm-section vsm-mob-hide">
<button>My Button</button>
</li>
<vsm-mob>Mobile Content</vsm-mob>
</template>
</vsm-menu>
</template>
<script>
export default {
name:"NavBar",
data() {
return {
menu: [
{
title: "News",
dropdown: "news",
element: "span",
attributes: {
class: ["my-class1", { "my-class2": true }],
"data-big": "yes"
},
listeners: {
mouseover: evt => {
console.log("news hover", evt);
}
},
new_section: false
},
{
title: "External Link",
attributes: {
href: "https:",
target: "_blank"
}
}
]
};
},
methods: {
onOpenDropdown() {
console.log("onOpenDropdown");
},
onCloseDropdown() {
console.log("onCloseDropdown");
}
}
};
</script>Well, I've been working with Nuxt for a long time, so I'm not sure. Can it cache this file? Let's say that if you try to create a new file and transfer the code there? (with 'vue' import)
MatteoGauthier
commented
4 years ago I created a codesandbox, same issue https://codesandbox.io/s/friendly-microservice-s5jep
oleksiikhr
commented
4 years ago So, this is all due to the core-js library. I see that the 2.x version is used there, while in this library 3.x:
https://github.com/nuxt/nuxt.js/blob/dev/yarn.lock#L4238
Try downgrade core-js library in package.json:
"core-js": "2.6.5"
appinteractive
commented
4 years ago The error seems to come from the fact, that you are dependend on the vue runtime compiler. Why not just using scoped slots?
Sad that I cant use that lib too, seems to be a but hard in its dependencies. 😞 I think I need to build it myself as a functional/renderless compnent without that layer of complexety that is introduced with the templates here.
rolandschellhorn
commented
2 years ago What is the right way of using this in a NUXT3 Project?
I used it like that but this errors with "a plugin must either be a function or an object with an install function"
plugins/stripe-menu.js
import { defineNuxtPlugin } from '#app'
import VueStripeMenu from 'vue-stripe-menu'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueStripeMenu)
})@rolandschellhorn Hello, sorry for the long answer, I'll look at this problem on the weekend, I haven't even seen Nuxt 3 yet :)
I added a plugin
/plugins/menu.jsAnd i got a lot of error,
How to use with nuxt ?