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