[{"data":1,"prerenderedAt":1109},["ShallowReactive",2],{"/en/articles/5-amazing-raycast-nuxt-snippets":3},{"id":4,"title":5,"body":6,"date":1093,"description":19,"extension":1094,"head":1095,"image":1096,"meta":1097,"navigation":143,"ogImage":1095,"path":1098,"readingTime":1099,"robots":1095,"schemaOrg":1095,"seo":1100,"sitemap":1101,"stem":1102,"tags":1103,"__hash__":1108},"articles_en/en/articles/5-amazing-raycast-nuxt-snippets.md","5 Amazing Raycast Snippets for Enhancing Your Nuxt (Vue) Projects",{"type":7,"value":8,"toc":1077},"minimal",[9,17,20,25,28,32,35,46,52,60,66,76,300,307,316,324,418,425,431,439,641,648,654,661,730,737,742,750,1038,1042,1047,1050,1054,1057,1061,1064,1068,1071,1074],[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-dark github-dark github-light","\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},"suVJd","\u003C",[87,96,98],{"class":97},"scWFE","script",[87,100,102],{"class":101},"s9E-l"," setup",[87,104,105],{"class":101}," lang",[87,107,108],{"class":93},"=",[87,110,112],{"class":111},"sYTnl","\"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},"sEiGg","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},"sAPL1"," 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-dark github-dark github-light","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},"s1uPE","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},"sOPP3","  // 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,444],{"className":326,"code":441,"filename":442,"language":329,"meta":443,"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","[~/store/.ts]",[39,445,446,460,464,474,479,484,488,514,542,553,558,563,578,589,594,599,604,612,626,631,636],{"__ignoreMap":83},[87,447,448,450,453,455,458],{"class":89,"line":90},[87,449,122],{"class":121},[87,451,452],{"class":93}," { defineStore } ",[87,454,131],{"class":121},[87,456,457],{"class":111}," 'pinia'",[87,459,137],{"class":93},[87,461,462],{"class":89,"line":118},[87,463,144],{"emptyLinePlaceholder":143},[87,465,466,469,471],{"class":89,"line":140},[87,467,468],{"class":93},"type {clipboard}Store ",[87,470,108],{"class":121},[87,472,473],{"class":93}," { \n",[87,475,476],{"class":89,"line":147},[87,477,478],{"class":93},"  count: number;\n",[87,480,481],{"class":89,"line":166},[87,482,483],{"class":93},"} \n",[87,485,486],{"class":89,"line":172},[87,487,144],{"emptyLinePlaceholder":143},[87,489,490,492,495,498,501,503,506,508,511],{"class":89,"line":178},[87,491,354],{"class":121},[87,493,494],{"class":121}," const",[87,496,497],{"class":153}," use",[87,499,500],{"class":93},"{clipboard}Store ",[87,502,108],{"class":121},[87,504,505],{"class":101}," defineStore",[87,507,363],{"class":93},[87,509,510],{"class":111},"'{clipboard}'",[87,512,513],{"class":93},", {\n",[87,515,516,519,522,524,527,530,533,536,539],{"class":89,"line":187},[87,517,518],{"class":101},"  state",[87,520,521],{"class":93},": ()",[87,523,376],{"class":121},[87,525,526],{"class":93}," {",[87,528,529],{"class":372},"clipboard",[87,531,532],{"class":93},"}",[87,534,535],{"class":101},"Store",[87,537,538],{"class":121}," =>",[87,540,541],{"class":93}," ({ \n",[87,543,544,547,550],{"class":89,"line":193},[87,545,546],{"class":93},"    count: ",[87,548,549],{"class":153},"0",[87,551,552],{"class":93},",\n",[87,554,555],{"class":89,"line":199},[87,556,557],{"class":93},"  }), \n",[87,559,560],{"class":89,"line":209},[87,561,562],{"class":93},"  getters: { \n",[87,564,565,568,571,573,576],{"class":89,"line":214},[87,566,567],{"class":101},"    getCount",[87,569,570],{"class":93},"()",[87,572,376],{"class":121},[87,574,575],{"class":153}," number",[87,577,473],{"class":93},[87,579,580,583,586],{"class":89,"line":224},[87,581,582],{"class":121},"      return",[87,584,585],{"class":153}," this",[87,587,588],{"class":93},".count; \n",[87,590,591],{"class":89,"line":235},[87,592,593],{"class":93},"    }\n",[87,595,596],{"class":89,"line":251},[87,597,598],{"class":93},"  },\n",[87,600,601],{"class":89,"line":261},[87,602,603],{"class":93},"  actions: { \n",[87,605,606,609],{"class":89,"line":270},[87,607,608],{"class":101},"    increment",[87,610,611],{"class":93},"() {\n",[87,613,614,617,620,623],{"class":89,"line":275},[87,615,616],{"class":153},"      this",[87,618,619],{"class":93},".count",[87,621,622],{"class":121},"++",[87,624,625],{"class":93},"; \n",[87,627,628],{"class":89,"line":288},[87,629,630],{"class":93},"    }, \n",[87,632,633],{"class":89,"line":293},[87,634,635],{"class":93},"  } \n",[87,637,639],{"class":89,"line":638},21,[87,640,196],{"class":93},[53,642,644,645],{"id":643},"composable-function-template-cps","Composable Function Template: ",[39,646,647],{},"!cps",[10,649,650,651,653],{},"Composable functions in Vue 3 bring reusability and organization to your code. The ",[39,652,647],{}," snippet offers a template for creating these functions, aiding in maintaining a clean and modular codebase.",[10,655,656,72,658,660],{},[69,657,71],{},[39,659,647],{}," for creating reusable composable functions that can be shared across components, enhancing code reusability and maintainability.",[77,662,665],{"className":326,"code":663,"filename":664,"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,666,667,679,703,708,713,717,725],{"__ignoreMap":83},[87,668,669,671,674,676],{"class":89,"line":90},[87,670,354],{"class":121},[87,672,673],{"class":121}," function",[87,675,497],{"class":101},[87,677,678],{"class":93},"{clipboard}() {\n",[87,680,681,683,685,687,690,692,695,697,700],{"class":89,"line":118},[87,682,393],{"class":121},[87,684,526],{"class":93},[87,686,529],{"class":153},[87,688,689],{"class":93},"} ",[87,691,108],{"class":121},[87,693,694],{"class":101}," ref",[87,696,363],{"class":93},[87,698,699],{"class":153},"null",[87,701,702],{"class":93},");\n",[87,704,705],{"class":89,"line":140},[87,706,707],{"class":93},"  \n",[87,709,710],{"class":89,"line":147},[87,711,712],{"class":412},"  // Composable logic\n",[87,714,715],{"class":89,"line":166},[87,716,707],{"class":93},[87,718,719,722],{"class":89,"line":172},[87,720,721],{"class":121},"  return",[87,723,724],{"class":93}," { {clipboard} };\n",[87,726,727],{"class":89,"line":178},[87,728,729],{"class":93},"}\n",[53,731,733,734],{"id":732},"fetching-data-with-composition-api-fcomp","Fetching Data with Composition API: ",[39,735,736],{},"!fcomp",[10,738,62,739,741],{},[39,740,736],{}," 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,743,744,746,747,749],{},[69,745,71],{}," Implement ",[39,748,736],{}," in scenarios where you need to fetch data from an API, providing a robust structure for data fetching and state management.",[77,751,753],{"className":79,"code":752,"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,754,755,771,813,823,832,836,840,850,861,865,873,877,885,893,923,947,970,993,1001,1009,1013,1023,1029],{"__ignoreMap":83},[87,756,757,759,761,763,765,767,769],{"class":89,"line":90},[87,758,94],{"class":93},[87,760,98],{"class":97},[87,762,102],{"class":101},[87,764,105],{"class":101},[87,766,108],{"class":93},[87,768,112],{"class":111},[87,770,115],{"class":93},[87,772,773,775,778,781,784,787,789,792,794,797,800,802,805,807,810],{"class":89,"line":118},[87,774,150],{"class":121},[87,776,777],{"class":93}," { ",[87,779,780],{"class":153},"data",[87,782,783],{"class":93},", ",[87,785,786],{"class":153},"pending",[87,788,783],{"class":93},[87,790,791],{"class":153},"error",[87,793,783],{"class":93},[87,795,796],{"class":153},"refresh",[87,798,799],{"class":93}," } ",[87,801,108],{"class":121},[87,803,804],{"class":101}," useFetch",[87,806,363],{"class":93},[87,808,809],{"class":111},"\"your_url\"",[87,811,812],{"class":93},", { \n",[87,814,815,818,821],{"class":89,"line":140},[87,816,817],{"class":93},"  immediate: ",[87,819,820],{"class":153},"false",[87,822,552],{"class":93},[87,824,825,828,830],{"class":89,"line":147},[87,826,827],{"class":93},"  watch: ",[87,829,820],{"class":153},[87,831,552],{"class":93},[87,833,834],{"class":89,"line":166},[87,835,196],{"class":93},[87,837,838],{"class":89,"line":172},[87,839,144],{"emptyLinePlaceholder":143},[87,841,842,845,848],{"class":89,"line":178},[87,843,844],{"class":121},"function",[87,846,847],{"class":101}," loadData",[87,849,611],{"class":93},[87,851,852,855,858],{"class":89,"line":187},[87,853,854],{"class":121},"  await",[87,856,857],{"class":101}," refresh",[87,859,860],{"class":93},"();\n",[87,862,863],{"class":89,"line":193},[87,864,729],{"class":93},[87,866,867,869,871],{"class":89,"line":199},[87,868,202],{"class":93},[87,870,98],{"class":97},[87,872,115],{"class":93},[87,874,875],{"class":89,"line":209},[87,876,144],{"emptyLinePlaceholder":143},[87,878,879,881,883],{"class":89,"line":214},[87,880,94],{"class":93},[87,882,219],{"class":97},[87,884,115],{"class":93},[87,886,887,889,891],{"class":89,"line":224},[87,888,227],{"class":93},[87,890,230],{"class":97},[87,892,115],{"class":93},[87,894,895,897,900,903,906,908,911,914,916,919,921],{"class":89,"line":235},[87,896,238],{"class":93},[87,898,899],{"class":97},"button",[87,901,902],{"class":93}," @",[87,904,905],{"class":101},"click",[87,907,108],{"class":93},[87,909,910],{"class":111},"\"",[87,912,913],{"class":93},"loadData",[87,915,910],{"class":111},[87,917,918],{"class":93},">Load Data\u003C/",[87,920,899],{"class":97},[87,922,115],{"class":93},[87,924,925,927,929,932,934,936,938,940,943,945],{"class":89,"line":251},[87,926,238],{"class":93},[87,928,230],{"class":97},[87,930,931],{"class":121}," v-if",[87,933,108],{"class":93},[87,935,910],{"class":111},[87,937,786],{"class":93},[87,939,910],{"class":111},[87,941,942],{"class":93},">Loading...\u003C/",[87,944,230],{"class":97},[87,946,115],{"class":93},[87,948,949,951,953,955,957,959,961,963,966,968],{"class":89,"line":261},[87,950,238],{"class":93},[87,952,230],{"class":97},[87,954,931],{"class":121},[87,956,108],{"class":93},[87,958,910],{"class":111},[87,960,791],{"class":93},[87,962,910],{"class":111},[87,964,965],{"class":93},">{{ error }}\u003C/",[87,967,230],{"class":97},[87,969,115],{"class":93},[87,971,972,974,976,978,980,982,984,986,989,991],{"class":89,"line":270},[87,973,238],{"class":93},[87,975,230],{"class":97},[87,977,931],{"class":121},[87,979,108],{"class":93},[87,981,910],{"class":111},[87,983,780],{"class":93},[87,985,910],{"class":111},[87,987,988],{"class":93},">{{ data }}\u003C/",[87,990,230],{"class":97},[87,992,115],{"class":93},[87,994,995,997,999],{"class":89,"line":275},[87,996,254],{"class":93},[87,998,230],{"class":97},[87,1000,115],{"class":93},[87,1002,1003,1005,1007],{"class":89,"line":288},[87,1004,202],{"class":93},[87,1006,219],{"class":97},[87,1008,115],{"class":93},[87,1010,1011],{"class":89,"line":293},[87,1012,144],{"emptyLinePlaceholder":143},[87,1014,1015,1017,1019,1021],{"class":89,"line":638},[87,1016,94],{"class":93},[87,1018,280],{"class":97},[87,1020,283],{"class":101},[87,1022,115],{"class":93},[87,1024,1026],{"class":89,"line":1025},22,[87,1027,1028],{"class":412},"/* composant styles */\n",[87,1030,1032,1034,1036],{"class":89,"line":1031},23,[87,1033,202],{"class":93},[87,1035,280],{"class":97},[87,1037,115],{"class":93},[53,1039,1041],{"id":1040},"why-use-these-snippets","Why Use These Snippets?",[1043,1044,1046],"h4",{"id":1045},"enhance-productivity","Enhance Productivity",[10,1048,1049],{},"Raycast snippets save time and effort by providing ready-to-use code templates, allowing you to focus on the unique aspects of your project.",[1043,1051,1053],{"id":1052},"maintain-consistency","Maintain Consistency",[10,1055,1056],{},"Using standardized snippets ensures consistency across your codebase, making it easier to read, maintain, and collaborate on.",[1043,1058,1060],{"id":1059},"streamline-development","Streamline Development",[10,1062,1063],{},"Snippets cater to common development tasks, streamlining your workflow and reducing the likelihood of errors or oversights.",[1043,1065,1067],{"id":1066},"foster-learning","Foster Learning",[10,1069,1070],{},"For new developers or those new to Nuxt and Vue, these snippets offer insight into best practices and efficient coding patterns.",[10,1072,1073],{},"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,1075,1076],{},"html pre.shiki code .suVJd, html code.shiki .suVJd{--shiki-dark:#E1E4E8;--shiki-default:#E1E4E8;--shiki-light:#24292E}html pre.shiki code .scWFE, html code.shiki .scWFE{--shiki-dark:#85E89D;--shiki-default:#85E89D;--shiki-light:#22863A}html pre.shiki code .s9E-l, html code.shiki .s9E-l{--shiki-dark:#B392F0;--shiki-default:#B392F0;--shiki-light:#6F42C1}html pre.shiki code .sYTnl, html code.shiki .sYTnl{--shiki-dark:#9ECBFF;--shiki-default:#9ECBFF;--shiki-light:#032F62}html pre.shiki code .sEiGg, html code.shiki .sEiGg{--shiki-dark:#F97583;--shiki-default:#F97583;--shiki-light:#D73A49}html pre.shiki code .sAPL1, html code.shiki .sAPL1{--shiki-dark:#79B8FF;--shiki-default:#79B8FF;--shiki-light:#005CC5}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 .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 .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 pre.shiki code .s1uPE, html code.shiki .s1uPE{--shiki-dark:#FFAB70;--shiki-default:#FFAB70;--shiki-light:#E36209}html pre.shiki code .sOPP3, html code.shiki .sOPP3{--shiki-dark:#6A737D;--shiki-default:#6A737D;--shiki-light:#6A737D}",{"title":83,"searchDepth":118,"depth":118,"links":1078},[1079,1080],{"id":23,"depth":118,"text":24},{"id":30,"depth":118,"text":31,"children":1081},[1082,1084,1086,1088,1090,1092],{"id":55,"depth":140,"text":1083},"Component Template: !comp",{"id":302,"depth":140,"text":1085},"API Handler Template: !api",{"id":420,"depth":140,"text":1087},"State Management with Pinia: !store",{"id":643,"depth":140,"text":1089},"Composable Function Template: !cps",{"id":732,"depth":140,"text":1091},"Fetching Data with Composition API: !fcomp",{"id":1040,"depth":140,"text":1041},"22/01/2024","md",null,"https://canvas.hrcd.fr/articles/5-raycast-snippets.jpg",{},"/en/articles/5-amazing-raycast-nuxt-snippets","10",{"title":5,"description":19},{"loc":1098},"en/articles/5-amazing-raycast-nuxt-snippets",[1104,1105,1106,1107],"Nuxt","Vue","Raycast","Productivity","k__XsTfKlxdCgGZvYhCBj3wFUJU9Ai1XRZsoJIcKvn0",1755764280365]