Comments (8)
Hi @PatrikLythell thanks for creating this issue, I thought about implementing it, it's now in the Roadmap for the 1.0.
I will try to find a nice way to implement it.
from nuxt.js.
@vadimsg it's a known issue of serialize-javascript
that we use for shorthand method definition: yahoo/serialize-javascript#24
For the hooks definitions in nuxt.config.js
, you have to use the ES2015 syntax:
...
transition: {
beforeEnter: function () {
console.log('beforeEnter');
}
}
...
from nuxt.js.
It is now in the 0.9.0
, the documentation is not updated yet but you can add the hooks like this:
nuxt.config.js
:
module.exports = {
transition: {
beforeEnter: function () {
// beforeEnter hook
}
}
}
It works also in the page components and the children components ๐
To disable CSS, juste like the documentation of Vue.js says, you can put css: false
to disable CSS transitions.
You can see the list of keys & hooks here: https://vuejs.org/v2/api/#transition
appearClass
, appearActiveClass
, beforeAppear
, appear
and afterAppear
are removed from the list because of the SSR feature of Nuxt.js.
from nuxt.js.
@Atinux with 0.9.5 can't manage to trigger the hook from nuxt.config.js, is this known bug?
from nuxt.js.
Hi @vadimsg
It will be possible in the next release.
In the meantime, you can add the hooks in your layouts/default.vue
.
from nuxt.js.
@Atinux FYI:
transition: { beforeEnter () { // beforeEnter hook } }
This makes build fail "Module build failed: SyntaxError: Unexpected token, expected , (42:55)"
transition: { beforeEnter: function () { console.log('beforeEnter'); } }
And this works. Need to upgrade global webpack v? Or it's nuxt bug?
from nuxt.js.
@Atinux How should transitions within the same route be handled?
Example. /post-1 coming from another route will transitiion
However if there are related posts within post-1 if I click on another post inside that page post-2 will not transition because technically is within the same page
from nuxt.js.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from nuxt.js.
Related Issues (20)
- https://nuxt.com isn't working on firefox HOT 2
- "No match found for location with path" is still spammed on unknown paths HOT 10
- Uncaught SyntaxError when building Nuxt.js 3.11.2 with Webpack HOT 3
- Docs: Nuxt Layers video update with latest one
- Docs: Nuxt Layers video update with latest one
- node .output/server/index.mjs error HOT 2
- Cannot find module from node_modules HOT 4
- Move `@nuxt/ui-templates` into nuxt/nuxt monorepo
- Refreshed NuxtWelcome design (+ other error pages?)
- Resolve `runtimeConfig` within nuxt options
- public subfolder name collision with route causes 301 redirect HOT 1
- Unable to access logger in client or server from plugin HOT 1
- Error with `dist` symlink with SST Ion
- Navigating from router-view throws Missing required param HOT 7
- Failed CSS preloads shouldn't throw errors HOT 1
- Big bundle size due to jsdom canvas HOT 1
- ้กต้ขๅทๆฐ ้กต้ขๆๅจ HOT 2
- ERROR (node:52837) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated HOT 2
- nuxt aos set options { once: true }, only show the animation on the first visit but not work when navigating to a page HOT 3
- static generating is removing invalid html, but not reporting when linting HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.js.