[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-571915-105":53,"doc-detail-571915-en":126},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":119,"head_meta":121,"extra_data":123,"updated_unix":125},105,"en","nuxt-cheat-sheet-quick-reference","Nuxt Cheat Sheet - Quick Reference","","Nuxt Cheat Sheet provides a compact set of practical guidance for building Nuxt applications, covering installation with nuxi, scaffolding and module integration, and core runtime configuration via defineNuxtConfig and runtimeConfig/public settings. It details error handling patterns using showError, clearError, and NuxtErrorBoundary, plus SEO and meta management through useHead. It also summarizes data fetching with $fetch/useFetch/useAsyncData, pages and file-based routing using NuxtLink, hybrid rendering routeRules, API route creation, and route middleware.",{"@graph":63,"@context":118},[64,80,101],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":11,"@type":70,"position":76},"https://docshare.wps.com/template/presentations/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/nuxt-cheat-sheet-quick-reference/571915/",4,{"url":78,"name":59,"@type":81,"image":82,"author":87,"headline":59,"publisher":90,"fileFormat":93,"inLanguage":57,"description":61,"dateModified":94,"datePublished":95,"encodingFormat":93,"isAccessibleForFree":96,"interactionStatistic":97},"DigitalDocument",{"url":83,"@type":84,"width":85,"height":86},"https://docshare.wps.com/thumbnails/nuxt-cheat-sheet-quick-reference/571915.png","ImageObject",442,249,{"name":88,"@type":89},"4398046744996","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-23","2026-10-13",true,{"@type":98,"interactionType":99,"userInteractionCount":79},"InteractionCounter",{"@type":100},"ViewAction",{"@type":102,"mainEntity":103},"FAQPage",[104,110,114],{"name":105,"@type":106,"acceptedAnswer":107},"How do you initialize a new Nuxt app using nuxi?","Question",{"text":108,"@type":109},"Use npx nuxi init nuxt-app to scaffold the project. The sheet also mentions adding a module template with npx nuxi init -t module app.","Answer",{"name":111,"@type":106,"acceptedAnswer":112},"What is the recommended approach for handling errors in Nuxt?",{"text":113,"@type":109},"Use showError for full-page errors and clearError to remove them. For isolating errors to part of the page, use NuxtErrorBoundary.",{"name":115,"@type":106,"acceptedAnswer":116},"How do you manage page-level SEO and head data?",{"text":117,"@type":109},"Use the useHead composable with a reactive title ref and provide meta, bodyAttrs, script, and link entries as needed.","https://schema.org",{"og:url":78,"og:type":120,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":122,"canonical":78},"index,follow",{"doc_id":124,"site_id":56},571915,1792350177,{"code":4,"msg":5,"data":127},{"doc_id":124,"user_id":128,"nickname":88,"user_avatar":60,"doc_module":9,"category_id":8,"category_name":11,"doc_title":59,"doc_description":61,"doc_content":129,"file_id":130,"file_url":131,"file_type":132,"file_size":133,"view_count":79,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":73,"language":134,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":135,"faqs":136,"seo_title":137,"seo_description":61,"update_tm":138,"read_time":9},4398046744996,"Nuxt Cheat Sheet  \nBrought to you by   \nInstallation  \nMore quickstarts available at [nuxt.new](nuxt.new)  \nnpx nuxi init nuxt-app  \nRuntime Config  \nexport default defineNuxtConfig ({  \nruntimeConfig: {  \n// Available only on server  \napiSecret: \"123\" ,  \n// Available on both client/server  \npublic: { apiBase: \"/api\" ,  \n},  \n} ,  \n}) ;  \nNuxi CLI  \nA zero-dependency experience for easy scaffolding and module integration.  \nError Handling  \nnuxi info  \nnuxi build  \nnuxi dev   \nnuxi add  \nscaffold new files, build static or ssr sites, and more!  \nErrors can occur at multiple levels, handle them gracefully on both the client and server  \n// show a full page error  \nshowError ({ statusCode: 404 ,  \nstatusMessage: \"Page Not Found\" })  \n// clear full page errors  \nclearError ({ redirect: '/homepage' })  \n//or Isolate errors to a part of page \u003CNuxtErrorBoundary>…\u003C/NuxtErrorBoundary>  \nSEO and Meta  \nManage meta tags and other head data with the useHead composable  \nconst title = ref (\"My App\");  \nuseHead ({   \ntitle, ~~  ~~head data can be reactive  meta: [  \n{ name: \"description\" , content: \"My amazing site. \" }],  \nbodyAttrs: { class: \"test\" ,  \n},  \nscript: [  \n{ children: \"console .log('Hello world')\" }],  \nlink: [{  \nrel: 'stylesheet' ,  \nhref: '[https://somecdn.com/some-stylesheeet.csss](https://somecdn.com/some-stylesheeet.csss) ',}   \n} )] ;  link external CSS   \nData Fetching  \nThe isomorphic $fetch function makes [http](http) requests on the client side but if an internal api on the server it skips it, calling the code directly.  \n\n| // Make requests to internal // or external API's\u003Cbr>const { data: count } =\u003Cbr>await useFetch(`/[movies/${](movies/${route.params.id})[route](movies/${route.params.id})[.](movies/${route.params.id})[params](movies/${route.params.id})[.](movies/${route.params.id})[id](movies/${route.params.id})[}](movies/${route.params.id})`{ key: [route](route.params.id)[.params.id](route.params.id) , |  |\n| --- | --- |\n| }) |  must use key to bust cache when url has dynamic parts  |\n| // above is shorthand for\u003Cbr>// great for when your working with an SDK\u003Cbr>const { data } = await useAsyncData (\u003Cbr>'count' , \u003Cbr>() => $fetch ( '/api/count' )\u003Cbr>)  remember to await! \u003Cbr>\u003Cbr>// Destructure helpful methods\u003Cbr>const { data: movies , pending , refresh , error } = await useFetch (() => '   ' ); |  |\n\nrename data  \nPages  \nFile based routing makes page creation a breeze  \n// Supports global error reporting  \nexport default defineNuxtPlugin ((nuxtApp) => {  \nnuxtApp .vueApp .config.errorHandler = (error , context) => {// report errors to an error reporting framework  \n}  \n} )  \npages/  \n- - | about .vue  \n /about   \n- - | posts/  \n- - - - | [id] .vue  /posts/123   \n// Fast client side navigation  \n\u003CNuxtLink to= \"/posts/123\">\u003C/NuxtLink>  \nNuxt Cheat Sheet  \nBrought to you by   \nHybrid Rendering  \nCustomize rendering mode per route  \n// nuxt .config.ts  \nexport default defineNuxtConfig ({  \nrouteRules: {  \n// Static page generated on-demand,//revalidates in background  \n'/blog/**': { swr: true },  \n// Static page generated on-demand once  \n'/articles/**': { static: true },// Render these routes as an SPA  \n'/admin/**': { ssr: false },}  \n})  \nDirectory Structure  \nConventions make navigating the project intuitive and empower magic functionality like auto imports, and file-based routing  \nAPI Routes  \nappend method to filename  \nEasily create a REST API with api routes.  \n// ~/server/api/hello.get .ts  \nexport default defineEventHandler (async (event)=> {  \nconst body = await readBody (event);  \nconst query = await getQuery (event)  \nconst cookie = await getCookie (event , 'name' ) const method = await getMethod (event)  \nreturn  \napi:}  \n} )  \n{  \n'works'  \nModules  \nChoose from a growing library of plug-and-play modules at [nuxt.com/modules](nuxt.com/modules)  \n .nuxt // used in dev to generate app  \n .output // built files  \n assets // styles, fonts, images, etc  \n components // auto-imported   \n composables // also a","cbCaivoGJbJBB0QN","https://ap.wps.com/l/cbCaivoGJbJBB0QN","pdf",751274,"English","# Installation\n# Runtime Config\n# Nuxi CLI\n# Error Handling\n# SEO and Meta\n# Data Fetching\n# Pages and Routing\n# Hybrid Rendering\n# Directory Structure\n# API Routes\n# Modules\n# Route Middleware","[{\"question\":\"How do you initialize a new Nuxt app using nuxi?\",\"answer\":\"Use npx nuxi init nuxt-app to scaffold the project. The sheet also mentions adding a module template with npx nuxi init -t module app.\"},{\"question\":\"What is the recommended approach for handling errors in Nuxt?\",\"answer\":\"Use showError for full-page errors and clearError to remove them. For isolating errors to part of the page, use NuxtErrorBoundary.\"},{\"question\":\"How do you manage page-level SEO and head data?\",\"answer\":\"Use the useHead composable with a reactive title ref and provide meta, bodyAttrs, script, and link entries as needed.\"}]","Nuxt Cheat Sheet - Quick Reference | PDF",1791924439]