fuxy526 / vue-snowf Goto Github PK
View Code? Open in Web Editor NEWSnowfall component for Vue.js, let it snow on your page! ❄ demo: https://fuxy526.github.io/snowf/
License: MIT License
Snowfall component for Vue.js, let it snow on your page! ❄ demo: https://fuxy526.github.io/snowf/
License: MIT License
Installed vue-snowf
via npm
. Trying to use it in a single file component as described in the README
:
<template lang="html">
...
<Snowf />
...
</template>
<script type="text/javascript">
import Snowf from "vue-snowf"
export default {
...
components: {
Snowf
},
...
}
gives
[Vue warn]: Unknown custom element: <Snowf> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Whenever I try to change the "amount" of snow flakes reactively, it throws the following error:
build.js:11982 Uncaught TypeError: Cannot read property 'opacity' of undefined
Do you have any thoughts as to why?
You can see my code here: https://github.com/lab27/snowftest
It would be nice, if i could update the amount of flakes. This way the user could change the amount of snow while browsing the site, which would be a cool feature.
Passing the amount into the component just works fine:
<Snowf :amount="snowAmount"></Snowf>
When changing the the snowAmount after the component has been rendered, i am getting the following error:
Cannot read property 'opacity' of undefined
I couldn't figure it out to change the amount on the fly, so it could be changed while running. Do you have an idea @Fuxy526 how to implement that?
Kindly regards,
Jonas
The component does not support server-side rendering, leading to the following error:
ReferenceError
document is not defined
node_modules\vue-snowf\dist\vue-snowf.js
i@6:4115
Using Nuxt 2.14.6 with SSR.
package.json:
{
"name": "portfolio",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint": "yarn lint:js",
"test": "jest"
},
"dependencies": {
"@nuxt/content": "^1.9.0",
"@nuxtjs/axios": "^5.12.2",
"@nuxtjs/pwa": "^3.0.2",
"core-js": "^3.6.5",
"nuxt": "^2.14.6",
"vue-snowf": "^0.0.2",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"@aceforth/nuxt-optimized-images": "^1.3.0",
"@nuxtjs/eslint-config": "^3.1.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/tailwindcss": "^3.1.0",
"@vue/test-utils": "^1.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.5.0",
"eslint": "^7.10.0",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-nuxt": "^1.0.0",
"eslint-plugin-prettier": "^3.1.4",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.1",
"jest": "^26.5.0",
"prettier": "^2.1.2",
"sqip-loader": "^1.0.0",
"vue-jest": "^3.0.4"
}
}
Setting ssr: false
in nuxt.config.js
fixes this completely, so it must be an SSR thing.
Similar document is not defined
issue related to SSR:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.