How to use with nuxt ?
MatteoGauthier opened this issue · comments
I added a plugin
/plugins/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)
And i got a lot of error,
WARN in ./node_modules/Vue/dist/vue.runtime.esm.js friendly-errors 16:39:26
There are multiple modules with names that only differ in casing. friendly-errors 16:39:26
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\Vue\dist\vue.runtime.esm.js
Used by 2 module(s), i. e.
D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\babel-loader\lib\index.js??ref--2-0!D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\pl
ugins\menu.js
* D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\vue\dist\vue.runtime.esm.js
Used by 80 module(s), i. e.
D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\babel-loader\lib\index.js??ref--2-0!D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\.n
uxt\client.js
friendly-errors 16:39:26
ERROR Failed to compile with 70 errors friendly-errors 16:39:26
These dependencies were not found: friendly-errors 16:39:26
friendly-errors 16:39:26
* core-js/modules/es6.array.find in ./.nuxt/client.js friendly-errors 16:39:26
* core-js/modules/es6.array.from in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:26
* core-js/modules/es6.array.iterator in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&typ
e=script&lang=js& and 2 others
* core-js/modules/es6.date.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:26
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:26
* core-js/modules/es6.number.constructor in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TeaserColumn.vue?vue&type=script&lan
g=js&, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js
* core-js/modules/es6.object.assign in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&type
=script&lang=js& and 2 others
* core-js/modules/es6.object.keys in ./.nuxt/client.js, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js friendly-errors 16:39:26
* core-js/modules/es6.object.set-prototype-of in ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js friendly-errors 16:39:26
* core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 2 others friendly-errors 16:39:26
* core-js/modules/es6.promise in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&type=scrip
t&lang=js& and 2 others
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js friendly-errors 16:39:27
* core-js/modules/es6.regexp.match in ./.nuxt/client.js, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js friendly-errors 16:39:27
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js and 1 other friendly-errors 16:39:27
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js friendly-errors 16:39:27
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicat
or.vue?vue&type=script&lang=js& and 1 other
* core-js/modules/es6.regexp.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:27
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:27
* core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:27
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js friendly-errors 16:39:27
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js friendly-errors 16:39:27
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:27
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:27
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js friendly-errors 16:39:27
* core-js/modules/es7.promise.finally in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&ty
pe=script&lang=js& and 2 others
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:27
* core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:39:27
friendly-errors 16:39:27
To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.from core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core
-js/modules/es6.function.name core-js/modules/es6.number.constructor core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.set-prototype-of core-j
s/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6
.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.r
epeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.pr
omise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterableHow to use with nuxt ?
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'
Hey i tried to change from Vue to vue, i get the same issue
I just googled, everyone says that I wrote above. Mmm, have you tried restarting? :)
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)
I created a codesandbox, same issue https://codesandbox.io/s/friendly-microservice-s5jep
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"
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.
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 :)