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
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 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.
With vue UI we can add vuex or vue-router plugin which will be automatically appended to the main file like bellow
createApp(App).use(store).use(router).mount('#app')
And creates file /router/index.js and /store/index.js with default template like bellow which is really nice.
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
Is there any other alternative way(vue-cli or npm) to add new plugins with facilities described above? npm install just adds the dependencies(as expected).
You can add CLI plugins from the command line, using #vue/cli commands (i.e., vue add PLUGIN_NAME) run from the root directory of your project.
For example, these commands add Vuex and Vue Router to your Vue CLI generated project:
vue add vuex
vue add router
vue add looks for the plugin by prefixing #vue/cli-plugin- to the specified name. So the above command automatically installs #vue/cli-plugin-vuex and #vue/cli-plugin-router. You can find several other Vue CLI plugins on npm that can be installed the same way.
What is the correct way of loading vuetify into a package that i use in a vuetify project?
When serving projects it all seems to work fine but when i build the project i've got some issues with the css/sass
things i've tried:
With vuetify loader: the css is loaded twice so i can't overwrite sass variables
Without vuetify loader: the package doesn't have the vuetify css, so it looks horrible
Without vuetify loader with vuetify.min.css: the css is loaded twice so i can't overwrite sass variables, and the loaded css is all the css so it's huge
My package is called vuetify-resource, and this is the source code of the index.js (without the vuetify loader) At this point everything works on npm run serve But when i build the package doesn't have "access" to the vuetify css.
import Vue from 'vue';
import Vuetify from 'vuetify';
import VuetifyResourceComponent from './VuetifyResource.vue';
Vue.use(Vuetify);
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
To solve my issue i had to do a couple of things.
Make peer dependencies of vuetify and vue
add vuetify to the webpack externals, so when someone uses the package, the package uses that projects vuetify
not longer import vue and vuetify in the index.js it's not needed, the project that uses the package imports that
import the specific components that you use in every .vue file
for example:
Vue.config.js
module.exports = {
configureWebpack: {
externals: {'vuetify/lib': 'vuetify/lib'},
},
};
index.js
import VuetifyResourceComponent from './VuetifyResource.vue';
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
part of the component.vue
import { VDataTable } from 'vuetify/lib';
export default {
name: 'vuetify-resource',
components: {
VDataTable
},
Step 4 in Ricardo's answer is not needed if you use vuetify-loader, it will do the job for you.
And I would modify step 2 to also exclude Vuetify's styles/css from your bundle. If you don't exclude them you can run into styling issues when the Vuetify version differ between your library and your application.
Use a regular expression in vue.config.js like this: configureWebpack: { externals: /^vuetify\// }. That way, only your own styles are included in the library bundle.
Trying to get the Dragabilly Vue plugin to work with my Nuxt app: https://www.npmjs.com/package/vue-draggabilly
I've used the usual approach that has worked with similar plugins but I don't have the depth of knowledge to crack this one. I am adding into my nuxt config file:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
That file includes this code:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
However, I get the following error and I'm not able to use:
vue-draggabilly.js:3 Uncaught ReferenceError: exports is not defined
This refers to this line in the plugin:
exports.install = function (Vue, options) { ....
It is a usual vuew plugin package, but I'm not sure how to get it to work with nuxt. Any help very greatly appreciated!
I see a warning:
warning in ./plugins/vue-draggabilly.js
4:8-22 "export 'default' (imported as 'VueDraggabilly') was not found in 'vue-draggabilly'
I don't know the best answer, but this seems to work:
import Vue from 'vue'
import * as VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)