[{"data":1,"prerenderedAt":457},["ShallowReactive",2],{"blog-article-/blog/nuxt-page-and-layout-transitions":3,"blog-surround-/blog/nuxt-page-and-layout-transitions":448},{"id":4,"title":5,"body":6,"canonical":434,"date":435,"description":12,"extension":436,"featured":437,"image":438,"meta":439,"navigation":440,"ogImage":434,"path":441,"provider":442,"published":437,"seo":443,"stem":444,"tags":445,"url":434,"__hash__":447},"blog/blog/nuxt-page-and-layout-transitions.md","Page and Layout Transitions in Nuxt.js",{"type":7,"value":8,"toc":432},"minimark",[9,13,24,116,123,156,163,225,232,257,260,322,329,362,373,387,425,428],[10,11,12],"p",{},"With Nuxt.js it is really easy to add transitions between your pages. You can create transitions for all your pages or layouts and you can even have different transitions for specific pages.",[10,14,15,16,20,21,23],{},"The default Nuxt.js transition name for pages is ",[17,18,19],"code",{},"page",". That means in order to add a fade transition to every page we just need to add the the word ",[17,22,19],{}," before our enter and leave transition classes that Vue.js gives us.",[25,26,31],"pre",{"className":27,"code":28,"language":29,"meta":30,"style":30},"language-css shiki shiki-themes github-light github-dark",".page-enter-active,\n.page-leave-active {\n  transition: opacity 0.5s;\n}\n.page-enter,\n.page-leave-to {\n  opacity: 0;\n}\n","css","",[17,32,33,46,55,75,81,89,97,111],{"__ignoreMap":30},[34,35,38,42],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sScJk",".page-enter-active",[34,43,45],{"class":44},"sVt8B",",\n",[34,47,49,52],{"class":36,"line":48},2,[34,50,51],{"class":40},".page-leave-active",[34,53,54],{"class":44}," {\n",[34,56,58,62,65,68,72],{"class":36,"line":57},3,[34,59,61],{"class":60},"sj4cs","  transition",[34,63,64],{"class":44},": opacity ",[34,66,67],{"class":60},"0.5",[34,69,71],{"class":70},"szBVR","s",[34,73,74],{"class":44},";\n",[34,76,78],{"class":36,"line":77},4,[34,79,80],{"class":44},"}\n",[34,82,84,87],{"class":36,"line":83},5,[34,85,86],{"class":40},".page-enter",[34,88,45],{"class":44},[34,90,92,95],{"class":36,"line":91},6,[34,93,94],{"class":40},".page-leave-to",[34,96,54],{"class":44},[34,98,100,103,106,109],{"class":36,"line":99},7,[34,101,102],{"class":60},"  opacity",[34,104,105],{"class":44},": ",[34,107,108],{"class":60},"0",[34,110,74],{"class":44},[34,112,114],{"class":36,"line":113},8,[34,115,80],{"class":44},[10,117,118,119,122],{},"You can add this css to a global css file and then import it using the ",[17,120,121],{},"nuxt.config.js"," file.",[25,124,128],{"className":125,"code":126,"language":127,"meta":30,"style":30},"language-javascript shiki shiki-themes github-light github-dark","export default {\n  css: ['~/assets/main.css']\n}\n","javascript",[17,129,130,140,152],{"__ignoreMap":30},[34,131,132,135,138],{"class":36,"line":37},[34,133,134],{"class":70},"export",[34,136,137],{"class":70}," default",[34,139,54],{"class":44},[34,141,142,145,149],{"class":36,"line":48},[34,143,144],{"class":44},"  css: [",[34,146,148],{"class":147},"sZZnC","'~/assets/main.css'",[34,150,151],{"class":44},"]\n",[34,153,154],{"class":36,"line":57},[34,155,80],{"class":44},[10,157,158,159,162],{},"Layouts work pretty much the same except that instead of writing a class starting with the word page you use the word ",[17,160,161],{},"layout",".",[25,164,166],{"className":27,"code":165,"language":29,"meta":30,"style":30},".layout-enter-active,\n.layout-leave-active {\n  transition: opacity 0.5s;\n}\n.layout-enter,\n.layout-leave-active {\n  opacity: 0;\n}\n",[17,167,168,175,182,194,198,205,211,221],{"__ignoreMap":30},[34,169,170,173],{"class":36,"line":37},[34,171,172],{"class":40},".layout-enter-active",[34,174,45],{"class":44},[34,176,177,180],{"class":36,"line":48},[34,178,179],{"class":40},".layout-leave-active",[34,181,54],{"class":44},[34,183,184,186,188,190,192],{"class":36,"line":57},[34,185,61],{"class":60},[34,187,64],{"class":44},[34,189,67],{"class":60},[34,191,71],{"class":70},[34,193,74],{"class":44},[34,195,196],{"class":36,"line":77},[34,197,80],{"class":44},[34,199,200,203],{"class":36,"line":83},[34,201,202],{"class":40},".layout-enter",[34,204,45],{"class":44},[34,206,207,209],{"class":36,"line":91},[34,208,179],{"class":40},[34,210,54],{"class":44},[34,212,213,215,217,219],{"class":36,"line":99},[34,214,102],{"class":60},[34,216,105],{"class":44},[34,218,108],{"class":60},[34,220,74],{"class":44},[34,222,223],{"class":36,"line":113},[34,224,80],{"class":44},[10,226,227,228,231],{},"You can of course create a transition for a specific page such as the home page for example. In your ",[17,229,230],{},"index.vue"," file you can add a property of transition and give it the name you like.",[25,233,235],{"className":125,"code":234,"language":127,"meta":30,"style":30},"export default {\n  transition: 'home'\n}\n",[17,236,237,245,253],{"__ignoreMap":30},[34,238,239,241,243],{"class":36,"line":37},[34,240,134],{"class":70},[34,242,137],{"class":70},[34,244,54],{"class":44},[34,246,247,250],{"class":36,"line":48},[34,248,249],{"class":44},"  transition: ",[34,251,252],{"class":147},"'home'\n",[34,254,255],{"class":36,"line":57},[34,256,80],{"class":44},[10,258,259],{},"This name will then be what you use instead of the word page when defining your transition classes.",[25,261,263],{"className":27,"code":262,"language":29,"meta":30,"style":30},".home-enter-active,\n.home-leave-active {\n  transition: opacity 0.5s;\n}\n.home-enter,\n.home-leave-active {\n  opacity: 0;\n}\n",[17,264,265,272,279,291,295,302,308,318],{"__ignoreMap":30},[34,266,267,270],{"class":36,"line":37},[34,268,269],{"class":40},".home-enter-active",[34,271,45],{"class":44},[34,273,274,277],{"class":36,"line":48},[34,275,276],{"class":40},".home-leave-active",[34,278,54],{"class":44},[34,280,281,283,285,287,289],{"class":36,"line":57},[34,282,61],{"class":60},[34,284,64],{"class":44},[34,286,67],{"class":60},[34,288,71],{"class":70},[34,290,74],{"class":44},[34,292,293],{"class":36,"line":77},[34,294,80],{"class":44},[34,296,297,300],{"class":36,"line":83},[34,298,299],{"class":40},".home-enter",[34,301,45],{"class":44},[34,303,304,306],{"class":36,"line":91},[34,305,276],{"class":40},[34,307,54],{"class":44},[34,309,310,312,314,316],{"class":36,"line":99},[34,311,102],{"class":60},[34,313,105],{"class":44},[34,315,108],{"class":60},[34,317,74],{"class":44},[34,319,320],{"class":36,"line":113},[34,321,80],{"class":44},[10,323,324,325,328],{},"Nuxt.js wraps your page in a transition component and adds the name to it. In this case the name it adds is ",[17,326,327],{},"home",". Basically Nuxt.js does this for you so you don't need to.",[25,330,334],{"className":331,"code":332,"language":333,"meta":30,"style":30},"language-html shiki shiki-themes github-light github-dark","\u003Ctransition name=\"home\">\u003C/transition>\n","html",[17,335,336],{"__ignoreMap":30},[34,337,338,341,345,348,351,354,357,359],{"class":36,"line":37},[34,339,340],{"class":44},"\u003C",[34,342,344],{"class":343},"s7hpK","transition",[34,346,347],{"class":40}," name",[34,349,350],{"class":44},"=",[34,352,353],{"class":147},"\"home\"",[34,355,356],{"class":44},">\u003C/",[34,358,344],{"class":343},[34,360,361],{"class":44},">\n",[10,363,364,365,368,369,372],{},"There is a slight difference in the default mode in Nuxt.js compared to Vue.js. The default mode in Nuxt.js is ",[17,366,367],{},"out-in",". Should you wish to change this you can do so using the ",[17,370,371],{},"mode"," key.",[10,374,375,376,378,379,382,383,386],{},"However if you want to change the mode across all pages or layouts then you can do so in the ",[17,377,121],{}," file using the ",[17,380,381],{},"pageTransition"," key for pages and the ",[17,384,385],{},"layoutTransition"," key for layouts.",[25,388,390],{"className":125,"code":389,"language":127,"meta":30,"style":30},"pageTransition: {\n    name: 'my-page',\n    mode: 'out-in'\n}\n",[17,391,392,399,411,421],{"__ignoreMap":30},[34,393,394,396],{"class":36,"line":37},[34,395,381],{"class":40},[34,397,398],{"class":44},": {\n",[34,400,401,404,406,409],{"class":36,"line":48},[34,402,403],{"class":40},"    name",[34,405,105],{"class":44},[34,407,408],{"class":147},"'my-page'",[34,410,45],{"class":44},[34,412,413,416,418],{"class":36,"line":57},[34,414,415],{"class":40},"    mode",[34,417,105],{"class":44},[34,419,420],{"class":147},"'out-in'\n",[34,422,423],{"class":36,"line":77},[34,424,80],{"class":44},[10,426,427],{},"As you can see adding page transitions in Nuxt.js is really easy so why not give it a try!",[429,430,431],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":30,"searchDepth":48,"depth":48,"links":433},[],null,"2020-04-13","md",false,"photo-1545986467-13cfe33c156e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",{},true,"/blog/nuxt-page-and-layout-transitions","imgix",{"title":5,"description":12},"blog/nuxt-page-and-layout-transitions",[446],"nuxt","K6OOYQWY0DJt_r9mQRAg9m2buRMZoR6zFPp4RB_DVno",[449,453],{"title":450,"path":451,"stem":452,"children":-1},"Let's Analyze your webpack bundles with Nuxt","/blog/nuxt-analyze-webpack-bundles","blog/nuxt-analyze-webpack-bundles",{"title":454,"path":455,"stem":456,"children":-1},"Build a Counter, Dropdown and Accordion in Vue Components!","/blog/build-counter-dropdown-accordion","blog/build-counter-dropdown-accordion",1790839748382]