[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fen\u002Farticles\u002F5-amazing-raycast-nuxt-snippets":3},{"id":4,"title":5,"author":6,"body":7,"brand":1079,"date":1080,"description":20,"draft":1081,"extension":1082,"game":1083,"image":17,"meta":1084,"navigation":144,"ogImage":1083,"path":1085,"readingTime":1086,"robots":1083,"schemaOrg":1083,"seo":1087,"sitemap":1088,"stem":1089,"tags":1090,"video":1083,"__hash__":1095},"articles_en\u002Fen\u002Farticles\u002F5-amazing-raycast-nuxt-snippets.md","5 Amazing Raycast Snippets for Enhancing Your Nuxt (Vue) Projects","Appynamic",{"type":8,"value":9,"toc":1063},"minimark",[10,18,21,26,29,33,36,47,53,61,67,77,301,308,317,325,419,426,432,440,644,651,657,664,733,740,745,753,1024,1028,1033,1036,1040,1043,1047,1050,1054,1057,1060],[11,12,13],"p",{},[14,15],"img",{"alt":16,"src":17},"preview","\u002Fimages\u002Farticles\u002F5-raycast-snippets.jpg",[11,19,20],{},"In the realm of web development, where efficiency is as valuable as expertise, tools that streamline and simplify our workflow are indispensable. Among these, Raycast snippets emerge as a powerful ally, especially for those working with Nuxt and Vue frameworks. But what exactly are these snippets, and how can they transform your development experience?",[22,23,25],"h2",{"id":24},"what-are-raycast-snippets","What Are Raycast Snippets?",[11,27,28],{},"Raycast snippets are small, reusable pieces of text or code that can be quickly inserted into your work. Think of them as shortcuts for frequently used content - whether it's code, canned email responses, or even emojis. They are designed to save time and reduce repetitive typing, allowing developers and writers to work more efficiently.",[22,30,32],{"id":31},"how-to-use-raycast-snippets","How to Use Raycast Snippets",[11,34,35],{},"Using Raycast snippets is straightforward. Once you've created or imported a snippet within the Raycast app, you can assign a specific keyword to it. This keyword acts as a trigger - whenever you type it in any application, the snippet will automatically expand in place, replacing the keyword with the full text or code of the snippet.",[11,37,38,39,43,44,46],{},"For instance, if you have a snippet for a standard email sign-off, you can assign a keyword like ",[40,41,42],"code",{},"sig1",". Typing ",[40,45,42],{}," in an email will then automatically expand to the full signature text. This feature is especially useful in coding, where you can have snippets for common code patterns or configurations.",[11,48,49],{},[14,50],{"alt":51,"src":52},"snippets-exemple","\u002Fimages\u002Farticles\u002Fsnippets-exemple.gif",[54,55,57,58],"h3",{"id":56},"component-template-comp","Component Template: ",[40,59,60],{},"!comp",[11,62,63,64,66],{},"The ",[40,65,60],{}," snippet is a basic yet powerful template for creating new Vue components. It includes a script setup with TypeScript support, a template section, and scoped styling. This snippet is ideal for rapidly scaffolding new components in your project.",[11,68,69,73,74,76],{},[70,71,72],"strong",{},"Usage Example:"," Use ",[40,75,60],{}," to quickly create new Vue components, ensuring consistency and saving time on setup.",[78,79,85],"pre",{"className":80,"code":81,"filename":82,"language":83,"meta":84,"style":84},"language-vue shiki shiki-themes github-light github-dark github-dark","\u003Cscript setup lang=\"ts\">\nimport type { PropType } from \"vue\";\n\nconst props = defineProps({\n item: {\n  type: String, \n  required: true\n }\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ item }}\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n\n\u003C\u002Fstyle>\n","MyComponent.vue","vue","",[40,86,87,117,139,146,165,171,177,186,192,198,208,213,223,234,250,260,269,274,287,292],{"__ignoreMap":84},[88,89,92,96,100,104,107,110,114],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"slsVL","\u003C",[88,97,99],{"class":98},"sByVh","script",[88,101,103],{"class":102},"shcOC"," setup",[88,105,106],{"class":102}," lang",[88,108,109],{"class":94},"=",[88,111,113],{"class":112},"sfrk1","\"ts\"",[88,115,116],{"class":94},">\n",[88,118,120,124,127,130,133,136],{"class":90,"line":119},2,[88,121,123],{"class":122},"so5gQ","import",[88,125,126],{"class":122}," type",[88,128,129],{"class":94}," { PropType } ",[88,131,132],{"class":122},"from",[88,134,135],{"class":112}," \"vue\"",[88,137,138],{"class":94},";\n",[88,140,142],{"class":90,"line":141},3,[88,143,145],{"emptyLinePlaceholder":144},true,"\n",[88,147,149,152,156,159,162],{"class":90,"line":148},4,[88,150,151],{"class":122},"const",[88,153,155],{"class":154},"suiK_"," props",[88,157,158],{"class":122}," =",[88,160,161],{"class":102}," defineProps",[88,163,164],{"class":94},"({\n",[88,166,168],{"class":90,"line":167},5,[88,169,170],{"class":94}," item: {\n",[88,172,174],{"class":90,"line":173},6,[88,175,176],{"class":94},"  type: String, \n",[88,178,180,183],{"class":90,"line":179},7,[88,181,182],{"class":94},"  required: ",[88,184,185],{"class":154},"true\n",[88,187,189],{"class":90,"line":188},8,[88,190,191],{"class":94}," }\n",[88,193,195],{"class":90,"line":194},9,[88,196,197],{"class":94},"});\n",[88,199,201,204,206],{"class":90,"line":200},10,[88,202,203],{"class":94},"\u003C\u002F",[88,205,99],{"class":98},[88,207,116],{"class":94},[88,209,211],{"class":90,"line":210},11,[88,212,145],{"emptyLinePlaceholder":144},[88,214,216,218,221],{"class":90,"line":215},12,[88,217,95],{"class":94},[88,219,220],{"class":98},"template",[88,222,116],{"class":94},[88,224,226,229,232],{"class":90,"line":225},13,[88,227,228],{"class":94},"  \u003C",[88,230,231],{"class":98},"div",[88,233,116],{"class":94},[88,235,237,240,243,246,248],{"class":90,"line":236},14,[88,238,239],{"class":94},"    \u003C",[88,241,242],{"class":98},"h1",[88,244,245],{"class":94},">{{ item }}\u003C\u002F",[88,247,242],{"class":98},[88,249,116],{"class":94},[88,251,253,256,258],{"class":90,"line":252},15,[88,254,255],{"class":94},"  \u003C\u002F",[88,257,231],{"class":98},[88,259,116],{"class":94},[88,261,263,265,267],{"class":90,"line":262},16,[88,264,203],{"class":94},[88,266,220],{"class":98},[88,268,116],{"class":94},[88,270,272],{"class":90,"line":271},17,[88,273,145],{"emptyLinePlaceholder":144},[88,275,277,279,282,285],{"class":90,"line":276},18,[88,278,95],{"class":94},[88,280,281],{"class":98},"style",[88,283,284],{"class":102}," scoped",[88,286,116],{"class":94},[88,288,290],{"class":90,"line":289},19,[88,291,145],{"emptyLinePlaceholder":144},[88,293,295,297,299],{"class":90,"line":294},20,[88,296,203],{"class":94},[88,298,281],{"class":98},[88,300,116],{"class":94},[54,302,304,305],{"id":303},"api-handler-template-api","API Handler Template: ",[40,306,307],{},"!api",[11,309,310,311,313,314,316],{},"Handling API requests is a common task in modern web applications. The ",[40,312,307],{}," snippet provides a template for creating API handlers using ",[40,315,54],{},", a lightweight HTTP toolkit. This snippet streamlines the process of setting up API routes and handling requests.",[11,318,319,321,322,324],{},[70,320,72],{}," Implement the ",[40,323,307],{}," snippet for creating efficient API routes in your Nuxt application, especially when dealing with CRUD operations.",[78,326,331],{"className":327,"code":328,"filename":329,"language":330,"meta":84,"style":84},"language-ts shiki shiki-themes github-light github-dark github-dark","import { H3Event } from \"h3\";\n\nexport default defineEventHandler(async (event: H3Event) => {\n  const body = await readBody(event);\n  \u002F\u002F your_api_logic\n});\n","~\u002Fserver\u002Fapi\u002FMyHandler.ts","ts",[40,332,333,347,351,390,409,415],{"__ignoreMap":84},[88,334,335,337,340,342,345],{"class":90,"line":91},[88,336,123],{"class":122},[88,338,339],{"class":94}," { H3Event } ",[88,341,132],{"class":122},[88,343,344],{"class":112}," \"h3\"",[88,346,138],{"class":94},[88,348,349],{"class":90,"line":119},[88,350,145],{"emptyLinePlaceholder":144},[88,352,353,356,359,362,365,368,371,375,378,381,384,387],{"class":90,"line":141},[88,354,355],{"class":122},"export",[88,357,358],{"class":122}," default",[88,360,361],{"class":102}," defineEventHandler",[88,363,364],{"class":94},"(",[88,366,367],{"class":122},"async",[88,369,370],{"class":94}," (",[88,372,374],{"class":373},"sQHwn","event",[88,376,377],{"class":122},":",[88,379,380],{"class":102}," H3Event",[88,382,383],{"class":94},") ",[88,385,386],{"class":122},"=>",[88,388,389],{"class":94}," {\n",[88,391,392,395,398,400,403,406],{"class":90,"line":148},[88,393,394],{"class":122},"  const",[88,396,397],{"class":154}," body",[88,399,158],{"class":122},[88,401,402],{"class":122}," await",[88,404,405],{"class":102}," readBody",[88,407,408],{"class":94},"(event);\n",[88,410,411],{"class":90,"line":167},[88,412,414],{"class":413},"sCsY4","  \u002F\u002F your_api_logic\n",[88,416,417],{"class":90,"line":173},[88,418,197],{"class":94},[54,420,422,423],{"id":421},"state-management-with-pinia-store","State Management with Pinia: ",[40,424,425],{},"!store",[11,427,428,429,431],{},"State management is crucial in large-scale applications. The ",[40,430,425],{}," snippet utilizes Pinia, a Vue store, offering a structured template for managing application state. It includes a state definition, getters, and actions.",[11,433,434,436,437,439],{},[70,435,72],{}," Utilize ",[40,438,425],{}," for setting up store modules in your Nuxt\u002FVue app, managing state more effectively and cleanly. the { clipboard } while be replaced by your actual clipboard.",[78,441,447],{"className":327,"code":442,"filename":443,"highlights":444,"language":330,"meta":446,"style":84},"import { defineStore } from 'pinia';\n\ntype {clipboard}Store = { \n  count: number;\n} \n\nexport const use{clipboard}Store = defineStore('{clipboard}', {\n  state: (): {clipboard}Store => ({ \n    count: 0,\n  }), \n  getters: { \n    getCount(): number { \n      return this.count; \n    }\n  },\n  actions: { \n    increment() {\n      this.count++; \n    }, \n  } \n});\n","~\u002Fstore\u002F{clipboard}.ts",[445],0,"[~\u002Fstore\u002F.ts]",[40,448,449,463,467,477,482,487,491,517,545,556,561,566,581,592,597,602,607,615,629,634,639],{"__ignoreMap":84},[88,450,451,453,456,458,461],{"class":90,"line":91},[88,452,123],{"class":122},[88,454,455],{"class":94}," { defineStore } ",[88,457,132],{"class":122},[88,459,460],{"class":112}," 'pinia'",[88,462,138],{"class":94},[88,464,465],{"class":90,"line":119},[88,466,145],{"emptyLinePlaceholder":144},[88,468,469,472,474],{"class":90,"line":141},[88,470,471],{"class":94},"type {clipboard}Store ",[88,473,109],{"class":122},[88,475,476],{"class":94}," { \n",[88,478,479],{"class":90,"line":148},[88,480,481],{"class":94},"  count: number;\n",[88,483,484],{"class":90,"line":167},[88,485,486],{"class":94},"} \n",[88,488,489],{"class":90,"line":173},[88,490,145],{"emptyLinePlaceholder":144},[88,492,493,495,498,501,504,506,509,511,514],{"class":90,"line":179},[88,494,355],{"class":122},[88,496,497],{"class":122}," const",[88,499,500],{"class":154}," use",[88,502,503],{"class":94},"{clipboard}Store ",[88,505,109],{"class":122},[88,507,508],{"class":102}," defineStore",[88,510,364],{"class":94},[88,512,513],{"class":112},"'{clipboard}'",[88,515,516],{"class":94},", {\n",[88,518,519,522,525,527,530,533,536,539,542],{"class":90,"line":188},[88,520,521],{"class":102},"  state",[88,523,524],{"class":94},": ()",[88,526,377],{"class":122},[88,528,529],{"class":94}," {",[88,531,532],{"class":373},"clipboard",[88,534,535],{"class":94},"}",[88,537,538],{"class":102},"Store",[88,540,541],{"class":122}," =>",[88,543,544],{"class":94}," ({ \n",[88,546,547,550,553],{"class":90,"line":194},[88,548,549],{"class":94},"    count: ",[88,551,552],{"class":154},"0",[88,554,555],{"class":94},",\n",[88,557,558],{"class":90,"line":200},[88,559,560],{"class":94},"  }), \n",[88,562,563],{"class":90,"line":210},[88,564,565],{"class":94},"  getters: { \n",[88,567,568,571,574,576,579],{"class":90,"line":215},[88,569,570],{"class":102},"    getCount",[88,572,573],{"class":94},"()",[88,575,377],{"class":122},[88,577,578],{"class":154}," number",[88,580,476],{"class":94},[88,582,583,586,589],{"class":90,"line":225},[88,584,585],{"class":122},"      return",[88,587,588],{"class":154}," this",[88,590,591],{"class":94},".count; \n",[88,593,594],{"class":90,"line":236},[88,595,596],{"class":94},"    }\n",[88,598,599],{"class":90,"line":252},[88,600,601],{"class":94},"  },\n",[88,603,604],{"class":90,"line":262},[88,605,606],{"class":94},"  actions: { \n",[88,608,609,612],{"class":90,"line":271},[88,610,611],{"class":102},"    increment",[88,613,614],{"class":94},"() {\n",[88,616,617,620,623,626],{"class":90,"line":276},[88,618,619],{"class":154},"      this",[88,621,622],{"class":94},".count",[88,624,625],{"class":122},"++",[88,627,628],{"class":94},"; \n",[88,630,631],{"class":90,"line":289},[88,632,633],{"class":94},"    }, \n",[88,635,636],{"class":90,"line":294},[88,637,638],{"class":94},"  } \n",[88,640,642],{"class":90,"line":641},21,[88,643,197],{"class":94},[54,645,647,648],{"id":646},"composable-function-template-cps","Composable Function Template: ",[40,649,650],{},"!cps",[11,652,653,654,656],{},"Composable functions in Vue 3 bring reusability and organization to your code. The ",[40,655,650],{}," snippet offers a template for creating these functions, aiding in maintaining a clean and modular codebase.",[11,658,659,73,661,663],{},[70,660,72],{},[40,662,650],{}," for creating reusable composable functions that can be shared across components, enhancing code reusability and maintainability.",[78,665,668],{"className":327,"code":666,"filename":667,"language":330,"meta":84,"style":84},"export function use{clipboard}() {\n  const {clipboard} = ref(null);\n  \n  \u002F\u002F Composable logic\n  \n  return { {clipboard} };\n}\n","~\u002Fcomposables\u002FuseComposables.ts",[40,669,670,682,706,711,716,720,728],{"__ignoreMap":84},[88,671,672,674,677,679],{"class":90,"line":91},[88,673,355],{"class":122},[88,675,676],{"class":122}," function",[88,678,500],{"class":102},[88,680,681],{"class":94},"{clipboard}() {\n",[88,683,684,686,688,690,693,695,698,700,703],{"class":90,"line":119},[88,685,394],{"class":122},[88,687,529],{"class":94},[88,689,532],{"class":154},[88,691,692],{"class":94},"} ",[88,694,109],{"class":122},[88,696,697],{"class":102}," ref",[88,699,364],{"class":94},[88,701,702],{"class":154},"null",[88,704,705],{"class":94},");\n",[88,707,708],{"class":90,"line":141},[88,709,710],{"class":94},"  \n",[88,712,713],{"class":90,"line":148},[88,714,715],{"class":413},"  \u002F\u002F Composable logic\n",[88,717,718],{"class":90,"line":167},[88,719,710],{"class":94},[88,721,722,725],{"class":90,"line":173},[88,723,724],{"class":122},"  return",[88,726,727],{"class":94}," { {clipboard} };\n",[88,729,730],{"class":90,"line":179},[88,731,732],{"class":94},"}\n",[54,734,736,737],{"id":735},"fetching-data-with-composition-api-fcomp","Fetching Data with Composition API: ",[40,738,739],{},"!fcomp",[11,741,63,742,744],{},[40,743,739],{}," snippet is designed for fetching data using Vue's Composition API. It provides a setup for making HTTP requests, handling loading states, and managing errors, all within a component.",[11,746,747,749,750,752],{},[70,748,72],{}," Implement ",[40,751,739],{}," in scenarios where you need to fetch data from an API, providing a robust structure for data fetching and state management.",[78,754,756],{"className":80,"code":755,"filename":82,"language":83,"meta":84,"style":84},"\u003Cscript setup lang=\"ts\">\nconst { data, pending, error, refresh } = useFetch(\"your_url\", { \n  immediate: false,\n  watch: false,\n});\n\nfunction loadData() {\n  await refresh();\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"loadData\">Load Data\u003C\u002Fbutton>\n    \u003Cdiv v-if=\"pending\">Loading...\u003C\u002Fdiv>\n    \u003Cdiv v-if=\"error\">{{ error }}\u003C\u002Fdiv>\n    \u003Cdiv v-if=\"data\">{{ data }}\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n\u002F* composant styles *\u002F\n\u003C\u002Fstyle>\n",[40,757,758,774,816,826,835,839,843,853,864,868,876,880,888,896,918,939,959,979,987,995,999,1009,1015],{"__ignoreMap":84},[88,759,760,762,764,766,768,770,772],{"class":90,"line":91},[88,761,95],{"class":94},[88,763,99],{"class":98},[88,765,103],{"class":102},[88,767,106],{"class":102},[88,769,109],{"class":94},[88,771,113],{"class":112},[88,773,116],{"class":94},[88,775,776,778,781,784,787,790,792,795,797,800,803,805,808,810,813],{"class":90,"line":119},[88,777,151],{"class":122},[88,779,780],{"class":94}," { ",[88,782,783],{"class":154},"data",[88,785,786],{"class":94},", ",[88,788,789],{"class":154},"pending",[88,791,786],{"class":94},[88,793,794],{"class":154},"error",[88,796,786],{"class":94},[88,798,799],{"class":154},"refresh",[88,801,802],{"class":94}," } ",[88,804,109],{"class":122},[88,806,807],{"class":102}," useFetch",[88,809,364],{"class":94},[88,811,812],{"class":112},"\"your_url\"",[88,814,815],{"class":94},", { \n",[88,817,818,821,824],{"class":90,"line":141},[88,819,820],{"class":94},"  immediate: ",[88,822,823],{"class":154},"false",[88,825,555],{"class":94},[88,827,828,831,833],{"class":90,"line":148},[88,829,830],{"class":94},"  watch: ",[88,832,823],{"class":154},[88,834,555],{"class":94},[88,836,837],{"class":90,"line":167},[88,838,197],{"class":94},[88,840,841],{"class":90,"line":173},[88,842,145],{"emptyLinePlaceholder":144},[88,844,845,848,851],{"class":90,"line":179},[88,846,847],{"class":122},"function",[88,849,850],{"class":102}," loadData",[88,852,614],{"class":94},[88,854,855,858,861],{"class":90,"line":188},[88,856,857],{"class":122},"  await",[88,859,860],{"class":102}," refresh",[88,862,863],{"class":94},"();\n",[88,865,866],{"class":90,"line":194},[88,867,732],{"class":94},[88,869,870,872,874],{"class":90,"line":200},[88,871,203],{"class":94},[88,873,99],{"class":98},[88,875,116],{"class":94},[88,877,878],{"class":90,"line":210},[88,879,145],{"emptyLinePlaceholder":144},[88,881,882,884,886],{"class":90,"line":215},[88,883,95],{"class":94},[88,885,220],{"class":98},[88,887,116],{"class":94},[88,889,890,892,894],{"class":90,"line":225},[88,891,228],{"class":94},[88,893,231],{"class":98},[88,895,116],{"class":94},[88,897,898,900,903,906,908,911,914,916],{"class":90,"line":236},[88,899,239],{"class":94},[88,901,902],{"class":98},"button",[88,904,905],{"class":102}," @click",[88,907,109],{"class":94},[88,909,910],{"class":112},"\"loadData\"",[88,912,913],{"class":94},">Load Data\u003C\u002F",[88,915,902],{"class":98},[88,917,116],{"class":94},[88,919,920,922,924,927,929,932,935,937],{"class":90,"line":252},[88,921,239],{"class":94},[88,923,231],{"class":98},[88,925,926],{"class":102}," v-if",[88,928,109],{"class":94},[88,930,931],{"class":112},"\"pending\"",[88,933,934],{"class":94},">Loading...\u003C\u002F",[88,936,231],{"class":98},[88,938,116],{"class":94},[88,940,941,943,945,947,949,952,955,957],{"class":90,"line":262},[88,942,239],{"class":94},[88,944,231],{"class":98},[88,946,926],{"class":102},[88,948,109],{"class":94},[88,950,951],{"class":112},"\"error\"",[88,953,954],{"class":94},">{{ error }}\u003C\u002F",[88,956,231],{"class":98},[88,958,116],{"class":94},[88,960,961,963,965,967,969,972,975,977],{"class":90,"line":271},[88,962,239],{"class":94},[88,964,231],{"class":98},[88,966,926],{"class":102},[88,968,109],{"class":94},[88,970,971],{"class":112},"\"data\"",[88,973,974],{"class":94},">{{ data }}\u003C\u002F",[88,976,231],{"class":98},[88,978,116],{"class":94},[88,980,981,983,985],{"class":90,"line":276},[88,982,255],{"class":94},[88,984,231],{"class":98},[88,986,116],{"class":94},[88,988,989,991,993],{"class":90,"line":289},[88,990,203],{"class":94},[88,992,220],{"class":98},[88,994,116],{"class":94},[88,996,997],{"class":90,"line":294},[88,998,145],{"emptyLinePlaceholder":144},[88,1000,1001,1003,1005,1007],{"class":90,"line":641},[88,1002,95],{"class":94},[88,1004,281],{"class":98},[88,1006,284],{"class":102},[88,1008,116],{"class":94},[88,1010,1012],{"class":90,"line":1011},22,[88,1013,1014],{"class":413},"\u002F* composant styles *\u002F\n",[88,1016,1018,1020,1022],{"class":90,"line":1017},23,[88,1019,203],{"class":94},[88,1021,281],{"class":98},[88,1023,116],{"class":94},[54,1025,1027],{"id":1026},"why-use-these-snippets","Why Use These Snippets?",[1029,1030,1032],"h4",{"id":1031},"enhance-productivity","Enhance Productivity",[11,1034,1035],{},"Raycast snippets save time and effort by providing ready-to-use code templates, allowing you to focus on the unique aspects of your project.",[1029,1037,1039],{"id":1038},"maintain-consistency","Maintain Consistency",[11,1041,1042],{},"Using standardized snippets ensures consistency across your codebase, making it easier to read, maintain, and collaborate on.",[1029,1044,1046],{"id":1045},"streamline-development","Streamline Development",[11,1048,1049],{},"Snippets cater to common development tasks, streamlining your workflow and reducing the likelihood of errors or oversights.",[1029,1051,1053],{"id":1052},"foster-learning","Foster Learning",[11,1055,1056],{},"For new developers or those new to Nuxt and Vue, these snippets offer insight into best practices and efficient coding patterns.",[11,1058,1059],{},"In conclusion, incorporating these Raycast snippets into your Nuxt and Vue development workflow can significantly enhance productivity, maintain code consistency, and streamline your development process. Whether you're building a small project or a large-scale application, these snippets are invaluable tools in the modern developer's arsenal.",[281,1061,1062],{},"html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sByVh, html code.shiki .sByVh{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#85E89D}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":84,"searchDepth":119,"depth":119,"links":1064},[1065,1066],{"id":24,"depth":119,"text":25},{"id":31,"depth":119,"text":32,"children":1067},[1068,1070,1072,1074,1076,1078],{"id":56,"depth":141,"text":1069},"Component Template: !comp",{"id":303,"depth":141,"text":1071},"API Handler Template: !api",{"id":421,"depth":141,"text":1073},"State Management with Pinia: !store",{"id":646,"depth":141,"text":1075},"Composable Function Template: !cps",{"id":735,"depth":141,"text":1077},"Fetching Data with Composition API: !fcomp",{"id":1026,"depth":141,"text":1027},"appynamic","22\u002F01\u002F2024",false,"md",null,{},"\u002Fen\u002Farticles\u002F5-amazing-raycast-nuxt-snippets","10",{"title":5,"description":20},{"loc":1085},"en\u002Farticles\u002F5-amazing-raycast-nuxt-snippets",[1091,1092,1093,1094],"Nuxt","Vue","Raycast","Productivity","gLpY_FbNujfvlQFRgIWmOzhE94h4-y-7icpCEX6QokY"]