After a fresh build with vue-cli (3.0.0-rc.5) the path to the lottie module can't be reached. Should I play with the configs?
./lottie.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&
<template>
<div id="app">
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
<div>
<p>Speed: x{{animationSpeed}}</p>
<input type="range" value="1" min="0" max="3" step="0.5"
v-on:change="onSpeedChange" v-model="animationSpeed">
</div>
<button v-on:click="stop">stop</button>
<button v-on:click="pause">pause</button>
<button v-on:click="play">play</button>
</div>
<script>
import Lottie from './lottie.vue';
import * as animationData from './assets/data.json';
export default {
name: 'app',
components: {
'lottie': Lottie
},
data() {
return {
defaultOptions: {animationData: animationData},
animationSpeed: 1
}
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
},
stop: function () {
this.anim.stop();
},
play: function () {
this.anim.play();
},
pause: function () {
this.anim.pause();
},
onSpeedChange: function () {
this.anim.setSpeed(this.animationSpeed);
}
}
}
</script>
If it still doesn't work change animationData to animationData.default in defaultOptions
defaultOptions: { animationData: animationData.default }
If you are using vue-lottie package then the import should be
import Lottie from 'vue-lottie';
This is because lottie package is located in the node_modules folder and you have to provide the right path or use direct package name import.
On a side note, I believe the current version of Vue cli is v3.1.1 so you should definitely upgrade.
Related
I'm using the 'vue-lottie' package and there's not much information about how to use it.
I got the JSON animations from Lordicons and it shows correctly but I can't make the animation work on hover or click, only loop or static (no animation).
My Component:
<template>
<div>
<lottie
:options="lottieOptions"
:width="50"
/>
</div>
</template>
<script>
import lottie from "vue-lottie/src/lottie.vue";
import * as animationData from "~/assets/about.json";
export default {
components: {
lottie
},
data() {
return {
anim: null, // for saving the reference to the animation
lottieOptions: {
animationData: animationData.default,
loop: false,
autoplay: false,
}
};
},
methods: {
handleAnimation(anim) {
this.anim = anim;
},
stop() {
this.anim.stop();
},
play() {
this.anim.play();
},
pause() {
this.anim.pause();
},
}
};
</script>
And I'm using on the page importing the component only:
...
<AboutIcon />
...
<script>
import AboutIcon from "~/components/AboutIcon.vue";
export default {
components: {
AboutIcon,
},
data() {
return {};
}
};
</script>
From the code sample you provided, you forgot to attach the #animCreated="handleAnimation" event.
So this.anim is actually always null.
<template>
<div>
<lottie
:options="lottieOptions"
:width="50"
#animCreated="handleAnimation"
/>
</div>
</template>
Then you just have to set a #mouseover="play" to start the animation on hover.
I'm taking the first steps with Quasar.
I want to build a modal window to be reused in forms.
I am using Dialog plugin and q-layout in a custom component.
However, when I use this custom component in another component the dialog plugin methods do not work.
Is there any way to solve this?
util/modal.js
import { Dialog } from "quasar";
export function ModalWindow(CustomComponent) {
Dialog.create({
component:CustomComponent,
ok: {
push: true
},
cancel: {
color: 'negative'
},
persistent: true
})
}
modal/ModalWindow.vue (custom component):
<template>
<q-dialog persistent ref="dialog" #hide="onDialogHide">
<q-layout view="lhh LpR lff" container style="height: 400px" class="bg-grey-3">
<q-toolbar class="bg-primary text-white q-mb-sm">
<q-toolbar-title>
<slot name="titelWindow"></slot>
</q-toolbar-title>
<q-btn v-close-popup flat round dense icon="close" />
</q-toolbar>
<q-form #submit.prevent="submitForm">
<q-card-section>
<slot></slot>
</q-card-section>
<q-card-actions align="right">
<slot name="toolbarBottom"></slot>
</q-card-actions>
</q-form>
</q-layout>
</q-dialog>
</template>
<script>
export default {
methods: {
show () {
this.$refs.dialog.show()
},
hide () {
this.$refs.dialog.hide()
},
onDialogHide () {
this.$emit('hide')
}
}
}
</script>
Call method ModalWindow on a page:
<script>
import { ModalWindow } from 'src/util/modal'
import CustomComponent from "components/modal/MyModalWindow.vue"
export default {
methods: {
showUWin: function(id) {
ModalWindow(CustomComponent)
}
}
}
</script>
So far it works well.
However, as I said,when I use this custom component in another component the dialog plugin methods do not work.
render custom component in another component: MyModalForm.vue
<template>
<MyModalWindow>
<!--Dialog's show method doesn't work-->
</MyModalWindow>
</template>
<script>
export default {
name: 'MyModalForm',
components: {
'MyModalWindow': require('components/modal/MyModalWindow.vue').default,
}
}
</script>
Call method ModalWindow on a page:
<script>
import { ModalWindow } from 'src/util/modal'
import CustomComponent from "components/modal/MyModalForm.vue"
export default {
methods: {
showWin: function(id) {
ModalWindow(CustomComponent)
}
}
}
</script>
I get on de console:
[Vue warn]: Error in mounted hook: "TypeError: this.$refs.dialog.show
is not a function"
I recently got into the same error.
My understanding is that, when you use something like:
Dialog.create({
component: CustomComponent,
...
})
// or
this.$q.dialog({
component: CustomComponent
})
the CustomComponent must directly implement the required show/hide/... methods, as per documentation.
So you have to repeat in each custom component this code (adapting it to the right "ref", specific to your component):
methods: {
show () {
this.$refs.dialog.show()
},
hide () {
this.$refs.dialog.hide()
},
onDialogHide () {
this.$emit('hide')
}
}
and propagate onOk and onCancel events appropriately.
For instance, summarizing everything:
<template>
<MyModalWindow ref="myModalForm" #ok="onOk" />
</template>
<script>
export default {
name: 'MyModalForm',
components: {
'MyModalWindow'
},
methods: {
show() {
this.$refs.myModalForm.show();
},
hide() {
this.$refs.myModalForm.hide();
},
onHide() {
this.$emit('hide');
},
onOk() {
this.$emit('ok');
this.hide();
}
}
}
</script>
I am beginner of Vue.js.
I am trying to use a plugin called vue-base64-file-upload in a single component in VueCLI. However, it doesn't work in index.vue...
I have just changed the example (https://github.com/dhhb/vue-base64-file-upload) to this.
<template>
<div class="container">
<h2>Upload file</h2>
<vue-base64-file-upload
class="v1"
accept="image/png,image/jpeg"
image-class="v1-image"
input-class="v1-input"
:max-size="customImageMaxSize"
#size-exceeded="onSizeExceeded"
#file="onFile"
#load="onLoad" />
</div>
</template>
<script>
import VueBase64FileUpload from 'vue-base64-file-upload';
export default {
data () {
return {
customImageMaxSize: 3 // megabytes
};
},
components: {
VueBase64FileUpload
},
methods: {
onFile(file) {
console.log(file); // file object
},
onLoad(dataUri) {
console.log(dataUri); // data-uri string
},
onSizeExceeded(size) {
alert(`Image ${size}Mb size exceeds limits of
${this.customImageMaxSize}Mb!`);
}
},
};
app.$mount('#app');
I've created a vuejs library with some components that could be used in many project.
In that library, I've got a component which can load svg files to be used inline in html (svg-icon).
It work great.
But in this same library, I've got another component which use svg-icon with a svg image stored in the library.
An import point, I'd like to use this library (node module) with an npm link
Which is the good way to give the path of the svg image, or where to store it?
I've tried a lot of different paths, but none of them is working...
This is my svg-icon component:
<template>
<component :is="component"></component>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
icon: {
type: String,
required: true
}
},
data () {
return {
component: null
}
},
watch: {
icon: () => {
this.load()
}
},
computed: {
loader () {
return () => import(this.icon)
}
},
methods: {
load () {
this.loader().then(() => {
this.component = () => this.loader()
})
}
},
mounted () {
this.load()
}
}
</script>
And this is the component which use svg-icon (the svg image is in the same folder actually) :
<template>
<svg-icon icon="~my-module/components/media/no-image.svg"></svg-icon>
<svg-icon icon="./no-image.svg"></svg-icon>
</template>
<script>
import SvgIcon from '../svg-icon/SvgIcon'
export default {
components: {
SvgIcon
}
}
</script>
I always got this errors:
Cannot find module '~my-module/components/media/no-image.svg'
Cannot find module './no-image.svg'
Which is the good path in that situation? Or should I put the svg file somewhere else? (I'd like to keep it in the library)
I've created a CodeSandbox here
SvgIcon.vue
<template>
<span v-html="icon"></span>
</template>
<script>
export default {
name: "SvgIcon",
props: {
icon: {
type: String,
required: true
}
}
};
</script>
HelloWorld.vue
//Usage
<template>
<svg-icon :icon="AlertIcon"></svg-icon>
</template>
<script>
import AlertIcon from "../assets/alert.svg";
import SvgIcon from "./SvgIcon";
export default {
data() {
return { AlertIcon };
},
components: {
SvgIcon
}
};
</script>
I've made some changes to your components.
You need to import the image and pass it to your component because dynamic import causes complications when it comes to the absolute paths.
I've removed some unnecessary fields from your SvgIcon code.
Hope this helps.
Hello I am having an issue with Nuxts ssr. I a trying to add 'vue-slick' to my web app and no matter what I do it continues to show "window is not defined".
As you can see I have tried multiple ways to allow vue-slick to be loaded on client side. Using plugins didn't help, using process.client in my component did not work as well.
Components/Carousel/Carousel.vue
<template>
<div class="carousel">
<Slick ref="slick" :options="slickOptions">
<a href="http://placehold.it/320x120">
<img src="http://placehold.it/320x120" alt="">
</a>
...
<a href="http://placehold.it/420x220">
<img src="http://placehold.it/420x220" alt="">
</a>
</Slick>
</div>
</template>
<script>
if (process.client) {
require('vue-slick')
}
import Slick from 'vue-slick'
export default {
components: {
Slick
},
data() {
return {
slickOptions: {
slidesToShow: 4
},
isMounted: false
}
},
methods: {
}
}
</script>
nuxt.config.js
plugins: [
{ src: '~/plugins/vue-slick', ssr: false }
],
plugins/vue-slick
import Vue from 'vue'
import VueSlick from 'vue-slick'
Vue.use(VueSlick);
Thanks for any help you can give!
So this is due to nuxt trying to render the slick component on the server side, even though you have set ssr: false in nuxt.config.
I have had this issue in other nuxt plugins and these steps should fix it.
in nuxt.config.js add this to your build object:
build: {
extend(config, ctx) {
if (ctx.isServer) {
config.externals = [
nodeExternals({
whitelist: [/^vue-slick/]
})
]
}
}
}
and in the page where you are trying to serve it you have to not mount the component until the page is fully mounted. So in your Components/Carousel/Carousel.vue set it up like this:
<template>
<div class="carousel">
<component
:is="slickComp"
ref="slick"
:options="slickOptions"
>
<a href="http://placehold.it/320x120">
<img src="http://placehold.it/320x120" alt="">
</a>
...
<a href="http://placehold.it/420x220">
<img src="http://placehold.it/420x220" alt="">
</a>
</component>
</div>
</template>
Then in your script section import your component and declare it like this:
<script>
export default {
data: () => ({
'slickComp': '',
}),
components: {
Slick: () => import('vue-slick')
},
mounted: function () {
this.$nextTick(function () {
this.slickComp = 'Slick'
})
},
}
</script>
Bascially this means the component isn't declared until the mounted function is called which is after all the server side rendering. And that should do it. Good luck.
I found another simple solution.
simply install "vue-slick" package to your nuxt project.
$ yarn add vue-slick
then component markup like below.
<template>
<component :is="slick" :options="slickOptions">
<div>Test1</div>
<div>Test2</div>
<div>Test3</div>
</component>
</template>
Finally set data and computed properties like this.
data() {
return {
slickOptions: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
centerMode: true,
},
};
},
computed: {
slick() {
return () => {
if (process.client) {
return import("vue-slick");
}
};
},
},
This solution prevents slick component importing globally as a plugin in nuxt config.