I have some base components that I use them in most of the page of my project. So I don't want to import them in each page and prefer to define them global. Related to nuxtjs source if I add components:true to nuxt.config.js my goal will achieved; but it doesn't work for me. And Version in use of nuxtjs is 2.15.2.
By the way, I'll be appreciated of any solution or idea.
You can register the component globally, so it won't be needed to import it in each page. In Nuxt, best way to do that is to create a plugin file.
Create for example the file myPlugin.js in your plugins folder, and use the following:
import Vue from 'vue';
import myComponent from '../components/MyComponent.vue';
Vue.use(myComponent);
Finally, in your nuxt.config.js, add your plugin:
plugins: [
'~plugins/myPlugin'
]
This is the second example presented in the Nuxt plugin doc.
This is not a bug and is totally working as expected, just a change that happened recently. More details can be found on my answer down here: https://stackoverflow.com/a/66336654/8816585
// nuxt.config.js
export default {
components: [
{
path: '~/components', // will get any components nested in let's say /components/test too
pathPrefix: false,
},
]
}
I'd recommend this solution, since it's the official way of doing.
Related
I am building my first NuxtJs project and I am also using Vue Class Component to write my components as classes.
I am facing trouble in accessing the beforeRouteEnter component hook after applying Vue Class Component (it doesn't get called anymore). So I found the documentation about registering aditional hooks when using this library, but I couldn't figure it out where to place the import statement in my NuxtJs structure.
I have this file (the same from docs):
// class-component-hooks.js
import Component from 'vue-class-component'
// Register the router hooks with their names
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate'
])
And I would appreciate some help on how to set it in my NuxtJs project:
// Where should I place this?
import './class-component-hooks'
It tourned out to be quite simple:
I have placed the .js file inside a plugins folder:
// plugins/class-component-hooks.js
import Component from 'vue-class-component'
// Register the router hooks with their names
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate'
])
Then at my nuxt.config.js file, I placed this line:
...
plugins: [
{ src: "~/plugins/class-component-hooks.js", mode: "client" },
],
...
I'm building a Nuxt app with Vuetify buildModule setup and want to make a number of v-cols sortable via VueDraggable (in my case, I built and added a super small Nuxt plugin which binds a global draggable component from the default export from VueDraggable). The v-cols should be wrapped with a v-row, so I'm using the draggable component with tag="v-row". This works well when running the dev server (nuxt-ts in my case since I'm using Nuxt with typescript support), but fails when building and running in production mode.
To illustrate the issue, here is some info on what's happening. My source is as follows (i.e. I use Pug):
In development mode, my v-row is rendered correctly in the DOM from Vuetify:
But when building and running in production mode, the draggable component literally renders v-row as the DOM tag instead of it going through rendering/parsing via Vuetify:
Does anyone have any idea on how to identify the root cause and how to resolve it here? I can likely hack my way around this problem for now, but want to know if this is a Nuxt bug or if anyone has solved this in any other way.
Just came across this issue, it turns out you need to register the VRow component globally:
import { VRow } from 'vuetify/lib';
Vue.component("v-row", VRow)
in your main.js
If the problem is caused by the vueDraggble registration try following:
Create <project-root>/plugins/draggable.ts
import draggable from 'vuedraggable';
import Vue from 'vue';
Vue.component('draggable', Draggable);
And remove
import draggable from 'vuedraggable'
from your .vue files.
and in your nuxt.config.js add
export default {
// ...
plugins: [
{ src: '~/plugins/draggable.ts', mode: 'client' }
]
//...
}
There's a plugin called vue-chat-scroll and I would like to use it in nuxt. Am a beginner so I cant really understand how but I wonder if its possible to use this vue plugin in nuxt as plugin. how would one do that?
Create a js file in plugin folder and name it vue-chat-scroll.js (the name is optional. It depends on you). then register your plugin inside this js file as follows:
import Vue from 'vue';
import VueChatScroll from 'vue-chat-scroll';
Vue.component('VueChatScroll', VueChatScroll);
Then import it in nuxt.config.js inside plugins as follow:
plugins: [
{
src: '~/plugins/vue-chat-scroll.js',
ssr: true
}
]
Create a file inside plugins folder, for example, vue-chat-scroll.js with the following content:
import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)
In nuxt.config.js import the plugin as
plugins: [...your existing plugins,'~/plugins/vue-chat-scroll.js']
and then follow the plugin tutorial for its API
I would like to use the icons from Octicon, my project is written in nuxt.js, so I decided to use this Octicon Component for Vue.js.
I created a file called octicon.js and added it to /plugins and registered it in nuxt.config.js. When I start my app, I get the message "unexpected identifier".
/plugins/octicion.js :
import Vue from 'vue'
import octicon from 'vue-octicon/components/Octicon.vue'
// Pick one way betweem the 2 following ways
// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'
// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'
Vue.use(octicon);
In MyComponent.vue I use it like
<template>
<div>
<octicon name="repo-forked" label="Forked Repository"></octicon>
</div>
</template>
nuxt.config.js looks like
plugins: [
"#/plugins/bootstrap-vue",
"#/plugins/octicon.js"
],
My Browser shows me:
Where is my error?
Two things you probably need to do. The plugin is only required on the client side so you should specify this in nuxt.config.js:
plugins: [
"#/plugins/bootstrap-vue",
{ src: '~/plugins/octicon.js', mode: 'client' }
]
Secondly you may need to add it to the transpile build option, also in nuxt config.js:
build: {
transpile: ['octicon.js']
}
You may also want to wrap the <octicon> tag in a <no-ssr> tag.
BugSnag provides a very useful and initially free product for tracking errors in your vue app. The problem is that there is no documentation for using this in a nuxt app. A plugin would be the best place to utilize it in the app.
Trying to resolve this was killing me for a while but I was able to find help from Patryk Padus from the comments on this post.
For anyone trying to make this happen, do the following:
1.Place the following code inside of a plugin located in the /plugins folder of your application root:
#/plugins/bugsnag.js
import Vue from 'vue'
import bugsnag from '#bugsnag/js'
import bugsnagVue from '#bugsnag/plugin-vue'
const bugsnagClient = bugsnag({
apiKey: 'YOUR-KEY',
notifyReleaseStages: [ 'production', 'staging' ]
})
bugsnagClient.use(bugsnagVue, Vue);
export default (ctx, inject) => {
inject('bugsnag', bugsnagClient)
}
2.Inside of the nuxt.config add the following to your plugins section:
plugins: [
'#/plugins/bugsnag.js',
],
3.Inside of your vue layout reference the bugsnag object using the $bugsnag object:
this.$bugsnag.notify(new Error('Nuxt Test error'))
If you're reading this in January 2021 and using Nuxt v2.x.x and above, the above answer might not work for you.
Here's what I did instead:
import Vue from 'vue'
import bugsnag from '#bugsnag/js'
import BugsnagVue from '#bugsnag/plugin-vue'
const bugsnagClient = bugsnag.start({
apiKey: process.env.BUGSNAG_KEY,
plugins: [new BugsnagVue()], // this is important
})
Vue.use(bugsnagClient) // // this is also important
export default (ctx, inject) => {
inject('bugsnag', bugsnagClient)
}
Tip: Install the #nuxt/dotenv module to be able to use process.env in your plugin.
References:
Bugsnag Vue installation reference