payload.js

window.__NUXT__=function(e,t,o,n,a,i,s,r,l,m,u,d,c,p,g,h,y,f,b,w,x,v,k,S,N,_,A,j,C,P,T,D,H,M,R,E,V,W,I){return{layout:"default",data:[{}],error:null,state:{theme:"light",filled:!0,docVersion:s,ghVersion:"v2.10.2",visibleAffix:!1,locale:"en",lang:{iso:"en",docVersion:s,links:{download:"Download",live_edit:"Live Edit"},text:{an_error_occurred:"An error occurred",api_page_not_found:"API page not found",please_define_title:"Please define a title in the front matter",please_define_description:"Please define a description in the front matter",search:'Search ("/" to focus)',version:"Version"},homepage:{meta:{title:"Nuxt.js - The Vue.js Framework",description:"Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable. Nuxt.js can produce Universal, Single Page and Static Generated Applications."},welcome:{get_started:"get started",github_stars:"22K+ github stars"},why:{try_nuxtjs_online:"Try NuxtJS Online"},sponsors:{become_a_sponsor:"Become a sponsor"},newsletter_form:{email:"Email",subscribing:"Subscribing...",subscribe:"Subscribe",subscribed_messages:{pre:"An email to confirm your subscription has been sent to",post:"💚"}}},guide:{release_notes:l,contribute:"Caught a mistake or want to contribute to the documentation?",edit_on_github:"Edit this page on GitHub!"}},menu:{api:[{title:"Essential",links:[{name:"Context",to:"/context",contents:[{name:"Universal keys",to:"#universal-keys"},{name:"Server-Side Keys",to:"#server-side-keys"},{name:"Client-Side keys",to:"#client-side-keys"}]}]},{title:m,links:[{name:"asyncData",to:"/"},{name:"fetch",to:"/pages-fetch"},{name:u,to:"/pages-head"},{name:"key",to:"/pages-key"},{name:"layout",to:"/pages-layout"},{name:d,to:"/pages-loading"},{name:c,to:"/pages-middleware"},{name:"scrollToTop",to:"/pages-scrolltotop"},{name:p,to:"/pages-transition",contents:[{name:"String",to:"#string"},{name:"Object",to:"#object"},{name:"Function",to:"#function"}]},{name:"validate",to:"/pages-validate"},{name:"watchQuery",to:"/pages-watchquery"}]},{title:"Components",links:[{name:"nuxt",to:"/components-nuxt"},{name:"nuxt-child",to:"/components-nuxt-child"},{name:"nuxt-link",to:"/components-nuxt-link"},{name:"client-only",to:"/components-client-only"}]},{title:"Utils",links:[{name:"$nuxt",to:"/$nuxt"}]},{title:o,links:[{name:"build",to:"/configuration-build",contents:[{name:"analyze",to:"#analyze"},{name:"babel",to:"#babel"},{name:"cache",to:"#cache"},{name:"crossorigin",to:"#crossorigin"},{name:"cssSourceMap",to:"#csssourcemap"},{name:"devMiddleware",to:"#devmiddleware"},{name:g,to:h},{name:"extend",to:"#extend"},{name:"extractCSS",to:"#extractcss"},{name:"filenames",to:"#filenames"},{name:"friendlyErrors",to:"#friendlyerrors"},{name:"hardSource",to:"#hardsource"},{name:"hotMiddleware",to:"#hotmiddleware"},{name:"html.minify",to:"#html-minify"},{name:"indicator",to:"#indicator"},{name:"loaders",to:"#loaders"},{name:"optimization",to:"#optimization"},{name:"optimizeCSS",to:"#optimizecss"},{name:"parallel",to:"#parallel"},{name:y,to:"#plugins"},{name:"postcss",to:"#postcss"},{name:"profile",to:"#profile"},{name:"publicPath",to:"#publicpath"},{name:"quiet",to:"#quiet"},{name:"splitChunks",to:"#splitchunks"},{name:"ssr",to:b},{name:"styleResources",to:"#styleresources"},{name:"templates",to:"#templates"},{name:"terser",to:"#terser"},{name:"transpile",to:"#transpile"},{name:"vueLoader",to:"#vueloader"},{name:w,to:"#watch"}]},{name:"buildDir",to:"/configuration-builddir"},{name:"cli",to:"/configuration-cli",contents:[{name:"bannerColor",to:"#bannercolor"}]},{name:"css",to:"/configuration-css"},{name:"dev",to:"/configuration-dev"},{name:"dir",to:"/configuration-dir"},{name:"env",to:"/configuration-env"},{name:"extendPlugins",to:"/configuration-extend-plugins"},{name:"generate",to:"/configuration-generate",contents:[{name:"concurrency",to:"#concurrency"},{name:"dir",to:"#dir"},{name:g,to:h},{name:"exclude",to:"#exclude"},{name:n,to:a},{name:"interval",to:"#interval"},{name:"minify",to:"#minify"},{name:"routes",to:"#routes"},{name:"subFolders",to:"#subfolders"}]},{name:"globalName",to:"/configuration-global-name"},{name:u,to:"/configuration-head"},{name:"hooks",to:"/configuration-hooks"},{name:"ignore",to:"/configuration-ignore"},{name:d,to:"/configuration-loading",contents:[{name:"Disable the Progress Bar",to:"#disable-the-progress-bar"},{name:"Customizing the Progress Bar",to:"#customizing-the-progress-bar"},{name:"Internals of the Progress Bar",to:"#internals-of-the-progress-bar"},{name:"Using a Custom Loading Component",to:"#using-a-custom-loading-component"}]},{name:"loadingIndicator",to:"/configuration-loading-indicator",contents:[{name:"Built-in indicators",to:"#built-in-indicators"},{name:"Custom indicators",to:"#custom-indicators"}]},{name:v,to:"/configuration-mode"},{name:"modern",to:"/configuration-modern"},{name:"modules",to:"/configuration-modules"},{name:"modulesDir",to:"/configuration-modulesdir"},{name:y,to:"/configuration-plugins"},{name:k,to:"/configuration-render",contents:[{name:"bundleRenderer",to:"#bundlerenderer"},{name:"etag",to:"#etag"},{name:"compressor",to:"#compressor"},{name:n,to:a},{name:"http2",to:"#http2"},{name:"injectScripts",to:"#injectscripts"},{name:"resourceHints",to:"#resourcehints"},{name:"ssr",to:b},{name:"ssrLog",to:"#ssrlog"},{name:"static",to:S},{name:"dist",to:"#dist"},{name:"csp",to:"#csp"}]},{name:"rootDir",to:"/configuration-rootdir"},{name:"router",to:"/configuration-router",contents:[{name:"base",to:"#base"},{name:"routeNameSplitter",to:"#routenamesplitter"},{name:"extendRoutes",to:"#extendroutes"},{name:n,to:a},{name:"linkActiveClass",to:"#linkactiveclass"},{name:"linkExactActiveClass",to:"#linkexactactiveclass"},{name:"linkPrefetchedClass",to:"#linkprefetchedclass"},{name:c,to:N},{name:v,to:"#mode"},{name:"parseQuery / stringifyQuery",to:"#parsequery-stringifyquery"},{name:"prefetchLinks",to:"#prefetchlinks"},{name:"scrollBehavior",to:"#scrollbehavior"},{name:"trailingSlash",to:"#trailingslash"}]},{name:"server",to:"/configuration-server"},{name:"serverMiddleware",to:"/configuration-servermiddleware"},{name:"srcDir",to:"/configuration-srcdir"},{name:p,to:"/configuration-transition"},{name:"vue.config",to:"/configuration-vue-config"},{name:w,to:"/configuration-watch"},{name:"watchers",to:"/configuration-watchers",contents:[{name:"chokidar",to:"#chokidar"},{name:"webpack",to:_}]}]},{title:"Programmatically",links:[{name:"Usage",to:"/nuxt"},{name:k,to:"/nuxt-render"},{name:"renderRoute",to:"/nuxt-render-route"},{name:"renderAndGetWindow",to:"/nuxt-render-and-get-window"}]},{title:"Internals",links:[{name:"Intro",to:"/internals"},{name:"Nuxt",to:"/internals-nuxt"},{name:"Renderer",to:"/internals-renderer"},{name:"Module Container",to:"/internals-module-container"},{name:"Builder",to:"/internals-builder"},{name:"Generator",to:"/internals-generator"}]}],examples:[{title:"Essentials",links:[{name:"Hello World",to:e},{name:"SEO HTML Head",to:"/seo-html-head"}]},{title:"Customization",links:[{name:"Custom Loading",to:"/custom-loading"},{name:"Custom Page Loading",to:"/custom-page-loading"},{name:"Custom Routes",to:"/custom-routes"},{name:"Global CSS",to:"/global-css"},{name:A,to:"/layouts"},{name:j,to:"/middleware"},{name:C,to:"/named-views"},{name:P,to:"/nested-routes"},{name:T,to:D},{name:"Routes transitions",to:"/routes-transitions"}]},{title:"Advanced",links:[{name:H,to:M},{name:"Auth Routes",to:"/auth-routes"},{name:"Auth External API (JWT)",to:"/auth-external-jwt"},{name:R,to:E},{name:"i18n",to:"/i18n"},{name:"Testing",to:"/testing"}]}],guide:[{title:"Prologue",links:[{to:e,name:V,contents:[{to:"#what-is-nuxtjs-",name:"What is Nuxt.js?"},{to:"#features",name:"Features"},{to:"#how-it-works",name:"How it Works"},{to:"#schema",name:"Schema"},{to:"#server-rendered-universal-ssr-",name:"Server Rendered"},{to:"#single-page-applications-spa-",name:"Single Page Application"},{to:"#static-generated-pre-rendering-",name:"Static Generated"}]},{to:"/contribution-guide",name:"Contribution Guide"},{to:"/release-notes",name:l},{to:"/upgrading",name:"Upgrading"}]},{title:"Getting Started",links:[{to:"/installation",name:"Installation",contents:[{to:"#using-code-create-nuxt-app-code-",name:"Using create-nuxt-app"},{to:"#starting-from-scratch",name:"Starting from scratch"}]},{to:"/directory-structure",name:"Directory Structure",contents:[{to:"#directories",name:"Directories"},{to:"#aliases",name:"Aliases"}]},{to:"/configuration",name:o},{to:"/routing",name:"Routing",contents:[{to:"#basic-routes",name:"Basic Routes"},{to:"#dynamic-routes",name:"Dynamic Routes"},{to:"#nested-routes",name:P},{to:"#dynamic-nested-routes",name:"Dynamic Nested Routes"},{to:"#named-views",name:C},{to:"#transitions",name:"Transitions"},{to:N,name:j}]},{to:"/views",name:"Views",contents:[{to:"#app-template",name:"App Template"},{to:"#layouts",name:A},{to:"#pages",name:m},{to:"#html-head",name:"HTML Head"}]},{to:M,name:H,contents:[{to:"#the-asyncdata-method",name:"The asyncData Method"},{to:"#the-context",name:"The Context"},{to:"#handling-errors",name:"Handling Errors"}]},{to:"/assets",name:"Assets",contents:[{to:_,name:"Webpack"},{to:S,name:"Static"}]},{to:D,name:T,contents:[{to:"#external-packages",name:"External Packages"},{to:"#vue-plugins",name:"Vue Plugins"},{to:"#inject-in-root-amp-context",name:"Inject in $root & context"},{to:"#client-side-only",name:"Client-side only"}]},{to:"/modules",name:"Modules",contents:[{to:"#introduction",name:V},{to:"#list-of-nuxt-js-modules",name:"List of Nuxt.js modules"},{to:"#write-a-basic-module",name:"Write a basic Module"},{to:"#async-modules",name:"Async Modules"},{to:"#build-only-modules",name:"Build-only Modules"},{to:"#common-snippets",name:"Common Snippets"},{to:"#run-tasks-on-specific-hooks",name:"Run Tasks on Specific hooks"},{to:"#module-package-commands",name:"Module package commands"}]},{to:E,name:R,contents:[{to:"#activate-the-store",name:"Activate the Store"},{to:"#modules-mode",name:"Modules mode"},{to:"#the-fetch-method",name:"The fetch Method"},{to:"#the-nuxtserverinit-action",name:"The nuxtServerInit Action"},{to:"#classic-mode",name:"Classic mode"}]},{to:"/typescript",name:"TypeScript Support"},{to:"/commands",name:"Commands and Deployment",contents:[{to:"#list-of-commands",name:"List of Commands"},{to:"#development-environment",name:"Development Enviroment"},{to:"#production-deployment",name:"Production Deployment"}]},{to:"/development-tools",name:"Development Tools",contents:[{to:"#end-to-end-testing",name:"End-to-End Testing"},{to:"#eslint-and-prettier",name:"ESLint and Prettier"}]}]}],faq:[{title:o,links:[{name:"How to use external resources?",to:e},{name:"How to use pre-processors?",to:"/pre-processors"},{name:"How to use JSX?",to:"/jsx"},{name:"How to add PostCSS plugins?",to:"/postcss-plugins"},{name:"How to extend webpack config?",to:"/extend-webpack"},{name:"How to add webpack plugins?",to:"/webpack-plugins"},{name:"How to edit HOST and PORT?",to:"/host-port"},{name:"How to use cached components?",to:"/cached-components"},{name:"How to use Google Analytics?",to:"/google-analytics"},{name:"How to share cross origin resource?",to:"/http-proxy"},{name:"How to extend Webpack config to load audio files?",to:"/webpack-audio-files"}]},{title:"Development",links:[{name:"window/document undefined?",to:"/window-document-undefined"},{name:"Why a CSS Flash appears?",to:"/css-flash"},{name:"Async data in components?",to:"/async-data-components"},{name:"Duplicated Meta Tags?",to:"/duplicated-meta-tags"},{name:"iOS and phone numbers",to:"/ios-phone-numbers"},{name:"Using Nuxt with Cloudflare",to:"/using-nuxt-with-cloudflare"}]},{title:"Deployment",links:[{name:"Deploy on AWS w/ S3 and Cloudfront",to:"/deployment-aws-s3-cloudfront"},{name:"Deploy on Azure Portal",to:"/deployment-azure-portal"},{name:"Deploy on Dokku",to:"/dokku-deployment"},{name:"Deploy on GitHub",to:"/github-pages"},{name:"Deploy on Google App Engine",to:"/appengine-deployment"},{name:"Deploy on Heroku",to:"/heroku-deployment"},{name:"Deploy on Netlify",to:"/netlify-deployment"},{name:"Deploy on Now",to:"/now-deployment"},{name:"Deploy on Surge",to:"/surge-deployment"},{name:"Using nginx as a proxy",to:"/nginx-proxy"}]}]},homepage:{companies:{attrs:{title:'Who\'s using nuxt<span class="text-nuxt-lightgreen">JS</span>'},body:e},index:{attrs:{},body:e},modes_server_side_rendering:{attrs:{title:W,content_title:W},body:"The most popular mode for Nuxt. With SSR, also called &quot;universal&quot; or &quot;isomorphic&quot; mode, a Node.js server\nwill be used to deliver HTML based on your Vue components to the client instead of the pure javascript.\nUsing SSR will lead to a large SEO boost, better UX and more opportunities (compared to a traditional Vue SPA).<br><br>\nBecause implementing SSR on your own can be really tedious, Nuxt.js gives you full support out of the box\nand will take care of common pitfalls.<br>"},modes_single_page_app:{attrs:{title:"Single Page App",content_title:"Single Page Application (SPA)"},body:"Don&#39;t need SSR or Static Site Generation but still want to profit from the benefits that Nuxt provides?\nAre you slowly transitioning your app and want to start lightweight? Then the traditional SPA mode will\nlikely be your choice.\nThe outcome will be a typical Vue SPA as you know it but influenced by your Nuxt configuration and the\nframework itself.<br>"},modes_statically_generated:{attrs:{title:I,content_title:I},body:'Static Site Generation is a very hot topic right now (aka JAMStack). Instead of switching to another framework and\nspending time to get used to it, why not killing two birds with one stone?\n<span style="color: #777">(only proverbial 🐦🐦)</span><br><br>\nNuxt.js supports generating a static website based on your Vue application. It is the &quot;best of both worlds&quot;\nas you don&#39;t need a server but still have SEO benefits because Nuxt will pre-render all pages and include\nthe necessary HTML. Also, you can deploy the resulting page easily to Netlify or GitHub pages.<br>'},modes:{attrs:{title:'NUXT<span class="text-nuxt-lightgreen">JS</span> rendering'},body:e},newsletter_form:{attrs:{title:'Nuxt<span class="text-nuxt-lightgreen">JS</span> Newsletter'},body:"Get the latest Nuxt news to your inbox, curated by the core team and contributors.<br>"},sponsors:{attrs:{title:"Sponsors"},body:"NuxtJS is an MIT licensed open source project and completely free to use.\nHowever, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.\nIf you run a business and are using Nuxt in a revenue-generating product, it makes business sense to sponsor Nuxt development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue/Nuxt community and makes it easier to attract Vue/Nuxt developers.\nIf you are an individual user and have enjoyed the productivity of using Nuxt, consider donating as a sign of appreciation.<br>"},welcome_figure:{attrs:{title:"Welcome figure - video"},body:'Video produced by <a href="https://www.vuemastery.com" target="_blank" rel="noopener">Vue Mastery</a>, download their free <a href="https://www.vuemastery.com/nuxt-cheat-sheet/" target="_blank" rel="noopener">Nuxt Cheat Sheet</a>.<br>'},welcome:{attrs:{title:'The Progressive<br><span class="text-nuxt-lightgreen">Vue.js</span> Framework<br>'},body:'Build your next Vue.js application with confidence using NuxtJS. An <span title="Under MIT license">open source</span> framework making web development simple and powerful.<br>'},why_enjoyable:{attrs:{title:"Enjoyable"},body:"Our main focus is the Developer Experience. We love Nuxt.js and continuously improve the framework so you love it too! 💚<br>Expect appealing solutions, descriptive error messages, powerful defaults and detailed documentation. If questions or problems come up, our helpful community will help you out.<br>"},why_performant:{attrs:{title:"Performant"},body:"With Nuxt.js, your application will be optimized out of the box.\nWe do our best to build performant applications by utilizing Vue.js and Node.js best practices.\nTo squeeze every unnecessary bit out of your app Nuxt includes a bundle analyzer and lots of opportunities to fine-tune your app.<br>"},why:{attrs:{title:"Why Nuxt?"},body:'Why NUXT<span class="text-nuxt-lightgreen">JS</span><br>'},why_modular:{attrs:{title:"Modular"},body:"Nuxt is based on a powerful modular architecture. You can choose from more than 50 modules to make your development faster and easier. You don&#39;t have to reinvent the wheel to get PWA benefits, add Google Analytics to your page or generate a sitemap.<br>"}},adBlocked:!1,focusMode:!1},serverRendered:!0}}("",0,"Configuration","fallback","#fallback",0,"2.10.X",0,"Release Notes","Pages","head","loading","middleware","transition","devtools","#devtools","plugins",0,"#ssr","watch",0,"mode","render","#static","#middleware","#webpack","Layouts","Middleware","Named Views","Nested Routes","Plugins","/plugins","Async Data","/async-data","Vuex Store","/vuex-store","Introduction","Server Side Rendered","Statically Generated")