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>
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 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
I am using the default Laravel 5.3 setup - a fresh install with default configuration for Vue.js 2.0.
With Laravel 5.1 and Vue.js 1.x, I could easily define components like and used browserify to compile.
Vue.component('test-component', require('./test-component');
/* test-component.js */
export default{
template:require('./test-component.template.html')
}
/* test-component.template.html */
<div class="test-component">
<h1> Test Component <h1>
</div>
However, with Vue 2, the default is webpack (although browserify is also available but could not get it working and webpack seems better). But I am not able to get the configuration working.
I have tried various configurations, finally I have this in my gulp.js file
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
var config = {
module:{
loaders:[
{
test: /\.html$/,
loader: 'vue-loader'
}
]
}
};
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js',null, null, config);
});
Now I am not getting any errors while compiling gulp webpack however when I try to view the page in the browser, it doesn't show the component and has an error/warn in the console
vue.js?3de6:513[Vue warn]: invalid template option:[object Object]
(found in component <test>)
vue.js?3de6:4085Uncaught TypeError: Cannot read property 'child' of null(…)
My app.js main entry file (default provided by Laravel)
require('./bootstrap');
Vue.component('test-component', require('./components/test-component'));
const app = new Vue({
//el: '#app',
}).$mount('#app');
What am I missing? Any pointers would be appreciated.
You have to use html-loader instead of vue-loader.
npm install html-loader --save-dev
Your gulpfile.js (need to change the loader):
const config = {
module: {
loaders:[{
test: /\.html$/,
loader: 'html'
}]
}
};
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js', null, null, config);
});
Your test-component.js (no changes, you're good to go):
export default {
template: require('./test-component.template.html')
}
Your test-component-template.html: (no changes, you're good to go)
<div class="test-component">
<h1>Test Component Goes Here</h1>
</div>
Important
Here's how to define your component:
Using Default
Vue.component('test-component', require('./test-component').default);
Or, simply use ES2015 import
import TestComponent from './test-component';
Vue.component('test-component', TestComponent);
Try this in your gulp file:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
mix.webpack('app.js');
});
And import your components like this:
import Test from './Components/Test.vue';
Vue.component('test', Test);