I'm trying to make a cropped image and then upload it to amazon in my NuxtJs app. The problem comes when I import library vue-image-crop-upload and get unexpected token <. Or briefly Syntax error
I tried using no-ssr but looks like a problem inside actual module.
// Usage in component
<no-ssr>
<button class="btn btn-primary upload-picture" #click="toggleShow">Cargar imagen</button>
<avatar-upload field="img"
#crop-success="cropSuccess"
v-model="show"
:no-square="true"
:width="500"
lang-type="en"
:height="500"
:params="params"
:headers="headers"
img-format="png"></avatar-upload>
<img :src="imgDataUrl">
</no-ssr>
import VueImageCropUpload from 'vue-image-crop-upload';
// Plugin registered
import Vue from 'vue';
import myUpload from 'vue-image-crop-upload';
Vue.component('avatar', myUpload);
// nuxt.config.js
plugins: [
{src: 'plugins/VueCropper', ssr: false},],
vendor: ['jquery', 'bootstrap', 'vue-image-crop-upload'],
I expect it working on nuxt.js. Client rendered app on which i tried to do the same works perfect
Have you tried adding the package to nuxt.js transpile config?
in nuxt.config.js
build: {
transpile: ['vue-image-crop-upload' ]
}
Related
I am a React JS Developer learning Nuxt JS - But I am failing to understand the way NPM libreries are imported and used in Nuxt 3 as plugins.
Console:
Failed to resolve import "C:/Users/Eigenaar/Desktop/nuxt-
course/first/plugins/v-tooltip.js" from
"virtual:nuxt:C\.....first\.nuxt\plugins\client.mjs"
plugins/test.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'#nuxtjs/tailwindcss'
],
plugins: ['~/plugins/v-tooltip.js'],
})
app.vue
<h2 v-tooltip="Show tooltip">Hover me!!</h2>
I have been following the official documentation but still getting error messages when trying to use third party NPM packages in general, is anybody having the same issue?
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.
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' }
]
//...
}
global.js
import Vue from 'vue'
// javascript import for when you're importing the css directly in your javascript
import "vue-navigation-bar/dist/vue-navigation-bar.css";
// import the library
import VueNavigationBar from "vue-navigation-bar";
Vue.component("vue-navigation-bar", VueNavigationBar);
nuxt.config.js
plugins: [
{ src: '~/plugins/global.js', ssr: false }
],
Error
window is not defined
I have tried all the possible solutions in nuxtjs documentation still getting same error.
Thanks!
The solution is to wrap it in <client-only>
<template>
<client-only>
<vue-navigation-bar :options="navbarOptions" />
</client-only>
</template>
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.