I am using nuxt js. I am trying to install a vue package vue-zoom. Actually few more plugins.
{ src: '~/plugins/zoom', ssr: false },
Here I kept ssr false because it gives errors like document is not defined...
In my plugins/zoom.js file I have this
import Vue from 'vue';
import vZoom from 'vue-zoom'
Vue.use(vZoom);
Now when I am trying to use this plugin like this
<v-zoom :img="`/uploads/${displayImg}`" ></v-zoom>
It gives me the above error.
Any reason or thought how can I use this plugin or similar in nuxt js?
I tried few more all gives similar errors.
Thank you
I got the same error when having the buildDir set to my functions/.nuxt folder, which I was using for SSR via Firebase Functions. I was able to solve the issue by making sure neither nuxt nor vue was installed in the node_modules inside the functions folder.
Are you using a similar setup by chance?
Related
I'm trying to run the Nuxt3 app but when I'm trying to run npm run dev then this error showing in my console: ERROR Cannot start nuxt: Context is not available
Anyone have face the same type of issue and how to fix that.
I had this same issue but the problem was that I was trying to use Nuxt/Vue specific functionality in a .ts file.
I was abstracting some of the lengthier functions and computed objects into a composition file, specifically import { useNuxtApp } from '#imports' and const { $store } = useNuxtApp(). The .ts file has no Nuxt context so these imports and functions just won't work there!
Might you be experiencing something similar?
I had same issue, when i try generated app for production "npm run generate".
Most likely its a version issue, update nuxt to "3.0.0-rc.8"
https://github.com/nuxt/framework/issues/6583
I've written a Vue JS component/plugin and have it in the following formats:
Common
ESM
UMD
I'm trying to import the UMD version into my Nuxt JS project (I'e also tried the others) and use it.
I've added a scripts array to my nuxt.config.js file to the head section:
scripts: [
{ src: '/js/vue-les-offers.umd.js' }
]
My JS file lives in static/js, and I've gone ahead and included my component in my page:
...
<vue-les-offers></vue-les-offers>
...
But I'm getting an error thrown in my console:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What am I missing?
I've tried:
installing via the plugins array
installing via the modules (used the ESM variant)
tried wrapping in a client-only element
tried both min and non-minified JS variants
I am trying to use #nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) project.
I can get Storybook to open and to show stories, but the component within the stories are not rendered. For example, if I try and use the example from https://storybook.nuxtjs.org/usage then I see a <link> element in devtools (the name of the Vue component), not a rendered <a> element (the content of the Vue component):
I then switched to trying to use another simple component:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js
But that doesn't work either, you can see an example of that here: https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo (I had trouble getting Storybook to work on Codesandbox).
Vue Storefront Next is based on Nuxt but I had to make a few changes to get Storybook to open:
Update the build section within nuxt.config.js:
babel: {
presets({ envName }) {
return [
[
'#nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
ignore: [/[\/\\]core-js/, /#babel[\/\\]runtime/],
},
install #babel/runtime-corejs3, core-js 3, and ts-node
ts-node was necessary because Vue Storefront Next provides a tsconfig.json file for development of part of the project, and that makes #nuxtjs/storybook module think the project is a Typescript project (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76), but the Vue Storefront project does not use #nuxt/typescript-runtime - I am wondering if this is part of the problem?
You can see the package.json content on Codesandbox: https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
Any clues as to how to fix this issue would be SUPER appreciated, thank you! I've spent the best part of a day on this but I don't know enough about Storybook or Nuxt to be able to debug it myself, unfortunately :(
It turns out that the #nuxtjs/storybook module seems to be dependent on components: true being set in the project's nuxt.config.js file.
This isn't mentioned anywhere in the #nuxtjs/storybook documentation, but I've raised a Github issue to point this out and will raise a PR against the docs if the maintainer agrees.
You can see my thought process behind how I discovered this issue in this Github thread: https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558
I'm trying to incorporate the Ripple package into my Nuxt application.
Following Nuxt docs and the package docs example I have a ripple.js file in plugins/ directory containing this:
import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)
Then in nuxt.config.js I have:
plugins: [
'~/plugins/ripple.js'
],
But now the app doesn't work at all, with some Unexpected token export error message on the screen, and a "Missing stack frames" error message in vm.js.
I have no idea what that means nor what I'm doing wrong, any suggestion?
This is due to an SSR error, where vue-ripple-directive cannot be used on the server. In order to get around this, you need to instruct Nuxt to only load the plugin on the client side.
To fix this, do the following 2 things:
First, rename ripple.js to ripple.client.js.
Second, update the plugins array to the following:
plugins: [
'~/plugins/ripple.client.js'
]
The .client postfix signals to nuxt to only run the plugin on the client.
More information can be found here
Always keep this method in mind when adding Vue plugins, especially when they interact with the DOM in some way. Most that I've come across require this method to function without errors, as the DOM is unavailable on the server.
I used npm install to include a client-side only plugin called vue-gallery and followed the instructions to load it as client-side only plugin as stated on the Nuxtjs docs. The plugin works fine with one exception: if I press f5 on any route that imports the plugin, Nuxt throws a 'Invalid or unexpected token' error. This is the error that is always thrown as when you would define the plugin as both client and serverside. The same happens if you type the URL directly in the browser. It does not happen however when you use the apps links to navigate to the page.
Note that this is just an external component type plugin, not a ES6 plugin.
vue-gallery.js
import Vue from 'vue'
import VueGallery from 'vue-gallery'
Vue.component('vue-gallery', VueGallery)
nuxt.config.js
plugins: [
'~/plugins/axios',
{ src: '~/plugins/vue-gallery.js', mode: 'client' }
],
In my pages component simply doing import VueGallery from 'vue-gallery'
Anyway to resolve this?
In my pages component simply doing import VueGallery from 'vue-gallery'
Thats the reason. If u import it in your pages it will be imported on SSR and so it will error, if its not SSR compatible. Since you are adding it globally as component in your plugin you dont need to import it in your pages