I'm using vue-moment and it works perfectly, although i get an error in console
[Vue warn]: Failed to resolve filter: moment
What i'm doing:
plugins/moment.js
import VueMoment from 'vue-moment'
import Vue from 'vue'
Vue.use(VueMoment)
nuxt.config.js
plugins: [
{ src: '~/plugins/moment.js', mode: 'client' }
],
Vue-moment works just fine, but the error appears.
try using the Nuxt version.
It is specifically made for Nuxt so you won't have any issues.
You should probably pass on using Moment since it deprecated itself: https://momentjs.com/docs/#/-project-status/
Rather using the module for date-fns, which is pretty simple to install and use: https://github.com/nuxt-community/date-fns-module
If anyone is still going through this, this was my approach.
In the plugins folder, I created a file named vue-moment.js and this is the content.
import Vue from 'vue'
Vue.use(require('vue-moment'));
After that, in the nuxt.config.js I added this line under plugins
plugins: [
...
"~/plugins/vue-moment",
...
],
Afterwards, when using it in the components, all I needed to do was call the function as shown below.
<span>{{ new Date() | moment("dddd, MMMM Do YYYY") }}</span>
I hope this helps someone.
Related
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.
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.
When trying to run the application with npm run serve (on iOS), I am getting the following error:
This relative module was not found:
./src/main.js in multi (webpack)-dev-server/client?http://10.0.0.5:8081/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
Please bear with me, I am new to this.
I have tried a bunch of random stuff like checking for misspelling issues, reinstalling webpack, updating node, and nothing. I have no clue of what this error is about so I am not sure where to look at.
The main.js file looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import './registerServiceWorker'
import * as VueGoogleMaps from "vue2-google-maps"
import VeeValidate from 'vee-validate'
import BootstrapVue from 'bootstrap-vue'
Vue.use(VueGoogleMaps, {
load: {
key: "AIzaSyCGiy39IZbj8oxvO4HHqSVjP5RmLSHl7mY",
libraries: "places" // necessary for places input
}
});
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
router,
store,
beforeCreate() {
this.$store.commit('initialiseStore');
this.$store.dispatch('commons/initialize');
},
render: h => h(App)
}).$mount('#app')
I expect the live web server to display, but I am getting this compilation error and it is failing.
I faced a similar issue after and spent hours searching.
The issue occurred in my project when I tried to install vuetify using command vue add vuetify. Apparently, the in automatically changes the app entry property in webpack.config automatically.
You can either change the filename itself to main.js or change the webpack config through vue.config.js (by reading the vue cli documentation regararding webpack config).
You can check your webpack.config by using the command vue inspect.
],
entry: {
app: [
'./src/main.js'
]
}
}
I had a similar error, this worked for me but not sure you have the same issue. I found this in one of my webpack configuration files (usually named like webpack.dev.conf.js):
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client')
]
},
I removed resolve('node_modules/webpack-dev-server/client') and it fixed that issue.
This is an old thread, but I ran across this recently after installing a new module to a Vue project. The problem went away when I updated all my other modules, too.
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)
I know vue-quill-editor.
However, I am having difficulties.
First, I started with
vue vue-init nuxt / express myProject
and
npm install --save vue-quill-editor
~plugins/quill.js
import Vue from 'vue'
if (process.BROWSER_BUILD) {
require('quill/dist/quill.snow.css')
require('quill/dist/quill.bubble.css')
require('quill/dist/quill.core.css')
Vue.use(require('vue-quill-editor/ssr'))
}
nuxt.config.js
plugins: [
{ src: '~plugins/quill.js' }
]
Is this the right way?
How do I add modules here?
For example,
Import {ImageImport} from '../modules/ImageImport.js'
Import {ImageResize} from '../modules/ImageResize.js'
Quill.register ('modules / imageImport', ImageImport)
Quill.register ('modules / imageResize', ImageResize)
I could refer to the following,
but it does not seem to be an example of a nuxt.js environment. So I failed.
https://github.com/surmon-china/vue-quill-editor/tree/master/examples
Thank you for your help.
You should take a look this package: Vue Quill Editor. This package has example for NuxtJS in here. I've been successful with this.
The best pratice is to use the ssr: false option in plugins to run the file only on the client-side.
nuxt.config.js
module.exports = {
plugins: [
{ src: '~plugins/quill.js', ssr: false }
],
}
Check the Nuxt doc: https://nuxtjs.org/guide/plugins#client-side-only
quills is for vue2 and vue3. if you are using nuxtjs that use vue2 you have to use this enter link description here
if you are using vuejs 3 you can use this enter link description here