I added plugin: vue-burger-menu to my nuxt.js project. And i have an error: "document is not defined". I know, that this plugin is available only for client-side. So I found in vue documentation enter link description here what I have to do to fix it. It works only for first refresh. Then I have again document is not defined.
nuxt.config.js:
build: {
vendor: ['vue-burger-menu'],
}
plugins: [
{ src: '~/plugins/vue-burger-menu.js', ssr: false }
],
Add a file to my plugins folder called "vue-burger-menu.js":
import Vue from 'vue';
import VueBurgerMenu from 'vue-burger-menu';
if (process.browser) {
Vue.use(VueBurgerMenu);
}
nav template
<template lang="pug">
Slide(right)
nav.menu_vertical
</template>
<script>
import { Slide } from 'vue-burger-menu'
export default {
name: 'Nav',
components: {
Slide
},
}
Replace deprecated process.browser with process.client
if (process.client) {
Vue.use(VueBurgerMenu);
}
Nuxt is doing SSR and document is only available in browser so you need to wrap your plugin code like
change "vue-burger-menu.js" as following
import Vue from 'vue';
import VueBurgerMenu from 'vue-burger-menu';
if (process.browser) {
Vue.use(VueBurgerMenu);
}
you can find detail documentation Here
Related
I just migrated my project created in vue 3 to nuxt 3. Previously I used the vue-toastification module but now I don't know how to import it correctly. My code using this module.
import { useToast, POSITION } from 'vue-toastification'
const toast = useToast()
export default {
methods: {
copy(text) {
toast.success('Copied!', {
timeout: 2000,
position: POSITION.BOTTOM_CENTER,
})
navigator.clipboard.writeText(text)
}
}
}
In Vue I had to do app.use(Toast) but Nuxt does not have an index.js file. Adding modules: ['vue-toastification/nuxt'] in nuxt.config.js does not work because I get an error.
Answers suggested by kissu and Ricardo de Paula worked for me while I was using development server (npm run dev).
After building and running the project I encountered error 500:
Named export 'useToast' not found. The requested module 'vue-toastification' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vue-toastification';
To fix this, I registered toast as plugin helper (I'm using Nuxt 3.1.1 with Nitro 2.1.1):
Inside vue-toastificaton.client.js:
import { defineNuxtPlugin } from '#app'
import * as vt from 'vue-toastification'
import '#/assets/css/toast.scss'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(vt.default)
return {
provide: {
toast: vt.useToast()
}
}
})
Then in my component script setup:
//throws an error after production build
//import { useToast } from 'vue-toastification'
//const toast = useToast()
//toast.success('Yay!!!')
//works after production build
const { $toast } = useNuxtApp()
$toast.success('Yay!!!')
If you want it to be available globally, you can install it as a Nuxt plugin as explained in the official docs or in this other answer.
vue-toastification is probably a client-side only plugin, hence you would probably want to use it as
/plugins/vue-toastificaton.client.js like this
import { defineNuxtPlugin } from '#app'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css" // if needed
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(Toast)
})
Then, you should be able to use it in your components with either Composition API or Options API (I think).
I was wanting to do the same thing. I read kissu's answer and did the following:
1 - I created a folder for the puglin - plugins
2 - Inside the plugins folder I created a file called vue-toastificaton.client.js
Inside vue-toastificaton.client.js:
import { defineNuxtPlugin } from '#app'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css' // if needed
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Toast)
})
And I used it that way:
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const onSubmit = () => {
// use the toast notification plugin to show a success message
toast.success('Hello world!')
}
</script>
I'm trying to get a Vue project setup with runtime compilation, but I'm not quite sure how to configure this in Snowpack.
Basically currently when I run the project I get a blank screen and the usual "[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
Currently my files look like below:
snowpack.config.js:
/** #type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: '/',
src: '/_dist_',
},
plugins: [
'#snowpack/plugin-vue',
'#snowpack/plugin-dotenv'
],
...
}
index.js:
import { createApp } from "vue";
// import App from "./App.vue";
import First from "./First.vue";
// const app = createApp(App);
const app = createApp({
data() {
return {
message: 'duck',
}
}
});
app.component('first', First);
app.component('ducks', {
props: ['todo'],
template: '<li>{{ todo }}</li>'
});
app.mount("#app");
// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
import.meta.hot.accept();
import.meta.hot.dispose(() => {
app.unmount();
});
}
index.html:
...
<body>
<div id="app">
<p>stuff should be fine:</p>
<p>{{message}}</p>
<ul>
<li>hello</li>
<ducks todo="testing"></ducks>
<ducks todo="goats"></ducks>
<ducks todo="canoes"></ducks>
</ul>
</div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/_dist_/index.js"></script>
</body>
...
I've tried adding an alias but that doesn't seem to do anything:
snowpack.config.js
module.exports = {
...
plugins: [
'#snowpack/plugin-vue',
'#snowpack/plugin-dotenv'
]
...
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
}
Anybody know how I can get runtime compilation setup?
Thanks,
Matt
I managed to fix this, by using import { createApp, h } from "vue/dist/vue.cjs.prod.js";.
But I'm not sure if this will create other issues in the future.
I am trying to use vue-agile carousel, I can install and get it to run without any issues right after i install it, i am using NUXT, but after restarting my server i keep getting this error and can not find any solution for it
<template>
<div>
<agile>
<div class="slide">
<img src="/img/img2.jpg" alt="" />
</div>
<div class="slide">
<img src="/img/img1.jpg" alt="" />
</div>
</agile>
</div>
</template>
<script >
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>
Did you checked the documentation about how to use this plugin in Nuxt instead of a regular Vue?
plugins/vue-agile.js
import Vue from 'vue'
import VueAgile from 'vue-agile'
Vue.use(VueAgile)
nuxt.config.js
export default {
plugins: ['~/plugins/vue-agile', mode: 'client']
}
To use component without SSR use the client-only component:
<client-only placeholder="Loading...">
<agile>...</agile>
</client-only>
EDIT: Add Shreerang's suggestion (comment below).
Sergio's answer above is mostly accurate, but needs a small tweek.
The nuxt.config.json config needs the following update. No build config is required.
plugins: [
{ src: '~/plugins/vue-agile', mode: 'client' }
]
You need to mark vue-agile to be transpiled in order to work on the server part (SSR).
nuxt.config.js :
...
build: {
transpile: [/vue-agile/]
}
...
from official Nuxt.js docs, they said.
If you get an Cannot use import statement outside a module error, you
may need to add your package to the build > transpile option in
nuxt.config.js for webpack loader to make your plugin available.
Example
module.exports = {
build: {
transpile: ['vue-agile']
}
}
Add type="module" in your script tag
<script type="module">
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>
I'm trying to use TipTap with Nuxt but can't seem to figure out why it won't work. I've read issues on the repo and used their suggestions but I just get these errors:
ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-state/dist/index.mjs
Can't import the named export 'ReplaceStep' from non EcmaScript module (only default export is available)
ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-view/dist/index.mjs
Can't import the named export 'Selection' from non EcmaScript module (only default export is available)
ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/node_modules/prosemirror-transform/dist/index.mjs
Can't import the named export 'Slice' from non EcmaScript module (only default export is available)
Set up
My set up is pretty simple and echoes this github issue
/components/forms/RichText.vue
<template>
<no-ssr>
<editor-content :editor="editor" />
</no-ssr>
</template>
<script>
import { Editor, EditorContent } from 'tiptap'
export default {
components: {
EditorContent
},
data () {
return {
editor: null
}
},
mounted () {
this.editor = new Editor({
content: '<p>This is just a boring paragraph</p>'
})
},
beforeDestroy () {
// Always destroy your editor instance when it's no longer needed
this.editor.destroy()
}
}
</script>
/components/global/LocalisedAttributes.vue
<template>
<div>
<rich-text />
</div>
</template>
<script>
import RichText from '~/components/forms/RichText.vue'
export default {
components: {
RichText
}
}
</script>
I've tried adding 'prosemirror-view' and 'tiptap' to build.transpile array in nuxt.config.js but it hasn't had any effect.
If anyones got it working on Nuxt I'd be grateful for any insight in to their set up.
Looks like it was an issue with Lerna, I've switched to yarn workspaces and now things seem to be working!
I'm trying to install Vue Typer in my Nuxt js app but no luck. I keep getting "document not defined". I tried importing it in my nuxt.config.js as a plugin but it doesn't work.
I got it working in my VueCLI 3, seems to work fine with this method.
Appreciate it!
Getting
NuxtServerError render function or template not defined in component: anonymous
////plugins///
import Vue from vue;
if (process.client) {
const VueTyper = require('vue-typer');
Vue.use(VueTyper);
}
///nuxt.config.js///
plugins: [
{src: '~/plugins/vue-typer.js', ssr: false}
],
<template>
<vue-typer text='Hello World! I was registered locally!'></vue-typer>
</template>
<script>
const VueTyper = processs.client ? require('vue-typer'): '';
export default {
components: {
VueTyper
}
}
</script>
To fix this, create a file called vueTyper.client.js under plugin folder then type this;
import Vue from 'vue';
import { VueTyper } from 'vue-typer';
Vue.component('vue-typer', VueTyper);
then in your nuxt.config.js add this to your plugin
plugins: [
{src: '~/plugins/vueTyper.client.js', mode: 'client',}
]
after doing this you can easily use it anywhere in your application without error:
<vue-typer text='Hello World! I was registered locally!'></vue-typer>