I know there are a few questions similar to this but they did not work for me so I am posting this.
I am trying to add jsPlumb into my Nuxtjs/Vuejs application. I did the following steps:
npm i jsplumb --save
Create a Vuejs page and add the simple code:
<template>
<client-only>
<div id="canvas" />
</client-only>
</template>
<script>
import { jsPlumb } from 'jsplumb'
export default {
mounted () {
if (process.client) {
console.log('MOUNTED - 2')
jsPlumb.ready(function () {
console.log('MOUNTED - 3')
})
}
}
}
</script>
I get the error:
ReferenceError
document is not defined
I tried many things which were mentioned but nothing seems to work.
Instead of using process.client I used the process.browser and it worked fine for me. Please refer the link: https://stackoverflow.com/a/69822954/7584240
Related
I'm trying to use VuePlyr in Nuxt 2. Right now I have it working as a plugin /plugins/vue-plyr.js,
import Vue from 'vue'
import VuePlyr from '#skjnldsv/vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
Vue.use(VuePlyr)
but it is just used in one page, so I would like to remove it from the main bundle and just import it locally when used. I've tried this in my page (the template part was working when using the plugin).
<template>
<client-only>
<vue-plyr>
<div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
</vue-plyr>
</client-only>
</template>
<script>
import 'vue-plyr/dist/vue-plyr.css'
import Vue from 'vue'
export default {
async mounted () {
const VuePlyr = await import('#skjnldsv/vue-plyr')
Vue.use(VuePlyr)
}
}
</script>
but unfortunately, I'm getting this error
[Vue warn]: Unknown custom element: <vue-plyr> - did you register the component correctly?
Any idea how I could achieve this? Related with How to make a dynamic import in Nuxt?
You could import it like that
export default {
components: {
[process.client && 'VuePlyr']: () => import('#skjnldsv/vue-plyr'),
}
}
As mentioned in a previous answer.
In your nuxt config define the plugin as client only:
plugins: [
{ src: "~/plugins/vue-plyr.js", mode: "client" }
],
Then also make sure there's a client-only tag around the use of the component:
<template>
<client-only>
<vue-plyr>
<div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
</vue-plyr>
</client-only>
</template>
Edit: importing the component again in the mounted method isn't necessary if you added it as a plugin
I am developing an app which has a list of objects that I want to paginate. I found vuejs-paginate plugin but I can't make it work in my view.
After installing it via npm and importing in the view, its tag is in fact in the HTML skeleton of the page, but it shows nothing. No error is displayed in the console either, only this Vue warning:
[Vue warn]: Failed to resolve component: paginate
Might it be a problem with the import? Could you help me?
I attach part of my code so you can see how I've declared it.
<template>
<ion-page>
<ion-content>
<paginate
:pageCount="10"
:containerClass="'pagination'"
:clickHandler="clickCallback"
>
</paginate>
</ion-content>
</ion-page>
</template>
<script>
import {
IonContent,
IonPage,
} from "#ionic/vue";
import { defineComponent } from "vue";
import { VuejsPaginate } from "vuejs-paginate";
export default defineComponent({
name: "Gestion",
components: {
'paginate': VuejsPaginate,
},
methods: {
clickCallback: function(page) {
console.log(page)
},
});
</script>
This has also happened to me when trying to import other "external" components. Could it be a problem related to Ionic?
Thank you in advance!
I'm using the plugin vue-flag-icon - https://www.npmjs.com/package/vue-flag-icon for flags, In their documentation I saw the following steps for initialising.
import FlagIcon from 'vue-flag-icon'
Vue.use(FlagIcon);
Do I need to have this? This is not specified in their docs!
export default {
components: {
FlagIcon. /// do i need to give it here ?
},
}
What is the purpose of this Vue.use(...), It's working fine even if I remove that. Can somebody help me out?
Checked the vue documentation - https://v2.vuejs.org/v2/guide/plugins.html.
Did not get a clear idea about it
Vue.use automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once.
For the flag component, it declares a global component that you can refer within your components, such that in the following example will render correctly.
in vue-flag-icon source code
install: function (Vue) {
if (VuePlugin.installed) {
return;
}
VuePlugin.installed = true;
Vue.component('flag', Flag);
}
You can see that with Vue.component('flag', Flag) that this is a root level component declaration, therefore, in your components, you do not require to declare something like following
Unnecessary if using Vue.use
import { Flag } from "vue-flag-icon"
export default {
components: { Flag }
}
If Vue.use is not used, the flag tag in the template will throw an error if you do not include it as a component within your vue init.
<template>
<div id="app">
<img src="./assets/logo.png">
<flag iso="it" />
<flag iso="gb" />
<flag iso="us" />
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
I am setting up the first app using Nuxtjs and Antd. I am using babel-plugin-import to reduce bundle size of Antd.
It works fine but in the component, it seem strange.
with babel-plugin-import
<template>
<Button type="primary">Enjoy it</Button>
</template>
<script>
import { Button } from 'ant-design-vue'
export default {
components: {
Button
}
}
</script>
On the official docs, they are using different tags.
<a-button type="primary">Primary</a-button>
This is the docs from Ant Design of Vue.
How can I find the docs when using with babel-plugin-import. I already search many times on the internet. But I am not finding any results.
the elegant way:
components: {
[Button.name]: Button
}
I just found the solution.
<script>
import Button from 'ant-design-vue/lib/button';
export default {
components: {
'a-button':Button
}
}
</script>
In this thread: Import UI library modularized in nuxtjs
I want to import modules in examples folder in THREE.js such as OBJLoader into my Nuxt Project.
I can import main folder of THREE, but error occurs when trying to import modules in examples folder.
Tried these steps in official docs.
https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules
I'm getting error below
SyntaxError
Unexpected token {
<template>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
export default{
}
</script>
here are my github repository
https://github.com/ksuhara/threejs-test
Finally I could find what was wrong.
Well, it has to do with nuxt building system. When using third parts libs, you should add them into nuxt.config.js bild->transpile array so it can be included as a dependency with Babel.
transpile: [
"three"
]
Ref: https://nuxtjs.org/api/configuration-build#transpile
Threejs must be run on the client side so enclosed the component with <client-only> tag and loaded it dynamically with const MyComponent = () => import('~/path/to/MyComponent.vue'); but now I am getting the error on server side.
Finally I managed to do it like this!
<template>
<div>
<client-only>
<threejs-component />
</client-only>
</div>
</template>
<script>
export default {
components: {
ThreejsComponent: process.browser ? () => import('~/path/to/ThreejsComponent.vue') : null
}
}
</script>
inside ThreejsComponent.vue are all the threejs imports