[{"data":1,"prerenderedAt":1249},["ShallowReactive",2],{"/en/writing":3,"articles-en":35},{"id":4,"title":5,"body":6,"date":27,"description":23,"extension":28,"meta":29,"navigation":30,"path":31,"seo":32,"stem":33,"__hash__":34},"content_en/en/3.writing.md","Writing",{"type":7,"value":8,"toc":24},"minimark",[9],[10,11,12,19],"writing",{},[13,14,16],"template",{"v-slot:title":15},"",[17,18,5],"p",{},[13,20,21],{"v-slot:subtitle":15},[17,22,23],{},"Some writings on topics that are close to my heart",{"title":15,"searchDepth":25,"depth":25,"links":26},2,[],null,"md",{},true,"/en/writing",{"title":5,"description":23},"en/3.writing","83b46dF0IoDeXlBSpgRtUwI6MY0MMG8qgRfbPaQ0EcE",[36,1117,1206],{"id":37,"title":38,"body":39,"date":1105,"description":50,"extension":28,"image":47,"meta":1106,"navigation":30,"path":1107,"readingTime":1108,"seo":1109,"stem":1110,"tags":1111,"__hash__":1116},"articles_en/en/articles/5-amazing-raycast-nuxt-snippets.md","5 Amazing Raycast Snippets for Enhancing Your Nuxt (Vue) Projects",{"type":7,"value":40,"toc":1089},[41,48,51,56,59,63,66,77,83,91,97,107,327,334,343,351,445,452,458,466,670,677,683,690,759,766,771,779,1050,1054,1059,1062,1066,1069,1073,1076,1080,1083,1086],[17,42,43],{},[44,45],"img",{"alt":46,"src":47},"preview","/articles/5-raycast-snippets.jpg",[17,49,50],{},"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?",[52,53,55],"h2",{"id":54},"what-are-raycast-snippets","What Are Raycast Snippets?",[17,57,58],{},"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.",[52,60,62],{"id":61},"how-to-use-raycast-snippets","How to Use Raycast Snippets",[17,64,65],{},"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.",[17,67,68,69,73,74,76],{},"For instance, if you have a snippet for a standard email sign-off, you can assign a keyword like ",[70,71,72],"code",{},"sig1",". Typing ",[70,75,72],{}," 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.",[17,78,79],{},[44,80],{"alt":81,"src":82},"snippets-exemple","/articles/snippets-exemple.gif",[84,85,87,88],"h3",{"id":86},"component-template-comp","Component Template: ",[70,89,90],{},"!comp",[17,92,93,94,96],{},"The ",[70,95,90],{}," 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.",[17,98,99,103,104,106],{},[100,101,102],"strong",{},"Usage Example:"," Use ",[70,105,90],{}," to quickly create new Vue components, ensuring consistency and saving time on setup.",[108,109,114],"pre",{"className":110,"code":111,"filename":112,"language":113,"meta":15,"style":15},"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",[70,115,116,146,167,173,192,198,204,213,219,225,235,240,249,260,276,286,295,300,313,318],{"__ignoreMap":15},[117,118,121,125,129,133,136,139,143],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"slsVL","\u003C",[117,126,128],{"class":127},"sByVh","script",[117,130,132],{"class":131},"shcOC"," setup",[117,134,135],{"class":131}," lang",[117,137,138],{"class":123},"=",[117,140,142],{"class":141},"sfrk1","\"ts\"",[117,144,145],{"class":123},">\n",[117,147,148,152,155,158,161,164],{"class":119,"line":25},[117,149,151],{"class":150},"so5gQ","import",[117,153,154],{"class":150}," type",[117,156,157],{"class":123}," { PropType } ",[117,159,160],{"class":150},"from",[117,162,163],{"class":141}," \"vue\"",[117,165,166],{"class":123},";\n",[117,168,170],{"class":119,"line":169},3,[117,171,172],{"emptyLinePlaceholder":30},"\n",[117,174,176,179,183,186,189],{"class":119,"line":175},4,[117,177,178],{"class":150},"const",[117,180,182],{"class":181},"suiK_"," props",[117,184,185],{"class":150}," =",[117,187,188],{"class":131}," defineProps",[117,190,191],{"class":123},"({\n",[117,193,195],{"class":119,"line":194},5,[117,196,197],{"class":123}," item: {\n",[117,199,201],{"class":119,"line":200},6,[117,202,203],{"class":123},"  type: String, \n",[117,205,207,210],{"class":119,"line":206},7,[117,208,209],{"class":123},"  required: ",[117,211,212],{"class":181},"true\n",[117,214,216],{"class":119,"line":215},8,[117,217,218],{"class":123}," }\n",[117,220,222],{"class":119,"line":221},9,[117,223,224],{"class":123},"});\n",[117,226,228,231,233],{"class":119,"line":227},10,[117,229,230],{"class":123},"\u003C/",[117,232,128],{"class":127},[117,234,145],{"class":123},[117,236,238],{"class":119,"line":237},11,[117,239,172],{"emptyLinePlaceholder":30},[117,241,243,245,247],{"class":119,"line":242},12,[117,244,124],{"class":123},[117,246,13],{"class":127},[117,248,145],{"class":123},[117,250,252,255,258],{"class":119,"line":251},13,[117,253,254],{"class":123},"  \u003C",[117,256,257],{"class":127},"div",[117,259,145],{"class":123},[117,261,263,266,269,272,274],{"class":119,"line":262},14,[117,264,265],{"class":123},"    \u003C",[117,267,268],{"class":127},"h1",[117,270,271],{"class":123},">{{ item }}\u003C/",[117,273,268],{"class":127},[117,275,145],{"class":123},[117,277,279,282,284],{"class":119,"line":278},15,[117,280,281],{"class":123},"  \u003C/",[117,283,257],{"class":127},[117,285,145],{"class":123},[117,287,289,291,293],{"class":119,"line":288},16,[117,290,230],{"class":123},[117,292,13],{"class":127},[117,294,145],{"class":123},[117,296,298],{"class":119,"line":297},17,[117,299,172],{"emptyLinePlaceholder":30},[117,301,303,305,308,311],{"class":119,"line":302},18,[117,304,124],{"class":123},[117,306,307],{"class":127},"style",[117,309,310],{"class":131}," scoped",[117,312,145],{"class":123},[117,314,316],{"class":119,"line":315},19,[117,317,172],{"emptyLinePlaceholder":30},[117,319,321,323,325],{"class":119,"line":320},20,[117,322,230],{"class":123},[117,324,307],{"class":127},[117,326,145],{"class":123},[84,328,330,331],{"id":329},"api-handler-template-api","API Handler Template: ",[70,332,333],{},"!api",[17,335,336,337,339,340,342],{},"Handling API requests is a common task in modern web applications. The ",[70,338,333],{}," snippet provides a template for creating API handlers using ",[70,341,84],{},", a lightweight HTTP toolkit. This snippet streamlines the process of setting up API routes and handling requests.",[17,344,345,347,348,350],{},[100,346,102],{}," Implement the ",[70,349,333],{}," snippet for creating efficient API routes in your Nuxt application, especially when dealing with CRUD operations.",[108,352,357],{"className":353,"code":354,"filename":355,"language":356,"meta":15,"style":15},"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",[70,358,359,373,377,416,435,441],{"__ignoreMap":15},[117,360,361,363,366,368,371],{"class":119,"line":120},[117,362,151],{"class":150},[117,364,365],{"class":123}," { H3Event } ",[117,367,160],{"class":150},[117,369,370],{"class":141}," \"h3\"",[117,372,166],{"class":123},[117,374,375],{"class":119,"line":25},[117,376,172],{"emptyLinePlaceholder":30},[117,378,379,382,385,388,391,394,397,401,404,407,410,413],{"class":119,"line":169},[117,380,381],{"class":150},"export",[117,383,384],{"class":150}," default",[117,386,387],{"class":131}," defineEventHandler",[117,389,390],{"class":123},"(",[117,392,393],{"class":150},"async",[117,395,396],{"class":123}," (",[117,398,400],{"class":399},"sQHwn","event",[117,402,403],{"class":150},":",[117,405,406],{"class":131}," H3Event",[117,408,409],{"class":123},") ",[117,411,412],{"class":150},"=>",[117,414,415],{"class":123}," {\n",[117,417,418,421,424,426,429,432],{"class":119,"line":175},[117,419,420],{"class":150},"  const",[117,422,423],{"class":181}," body",[117,425,185],{"class":150},[117,427,428],{"class":150}," await",[117,430,431],{"class":131}," readBody",[117,433,434],{"class":123},"(event);\n",[117,436,437],{"class":119,"line":194},[117,438,440],{"class":439},"sCsY4","  // your_api_logic\n",[117,442,443],{"class":119,"line":200},[117,444,224],{"class":123},[84,446,448,449],{"id":447},"state-management-with-pinia-store","State Management with Pinia: ",[70,450,451],{},"!store",[17,453,454,455,457],{},"State management is crucial in large-scale applications. The ",[70,456,451],{}," snippet utilizes Pinia, a Vue store, offering a structured template for managing application state. It includes a state definition, getters, and actions.",[17,459,460,462,463,465],{},[100,461,102],{}," Utilize ",[70,464,451],{}," 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.",[108,467,473],{"className":353,"code":468,"filename":469,"highlights":470,"language":356,"meta":472,"style":15},"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",[471],0,"[~/store/.ts]",[70,474,475,489,493,503,508,513,517,543,571,582,587,592,607,618,623,628,633,641,655,660,665],{"__ignoreMap":15},[117,476,477,479,482,484,487],{"class":119,"line":120},[117,478,151],{"class":150},[117,480,481],{"class":123}," { defineStore } ",[117,483,160],{"class":150},[117,485,486],{"class":141}," 'pinia'",[117,488,166],{"class":123},[117,490,491],{"class":119,"line":25},[117,492,172],{"emptyLinePlaceholder":30},[117,494,495,498,500],{"class":119,"line":169},[117,496,497],{"class":123},"type {clipboard}Store ",[117,499,138],{"class":150},[117,501,502],{"class":123}," { \n",[117,504,505],{"class":119,"line":175},[117,506,507],{"class":123},"  count: number;\n",[117,509,510],{"class":119,"line":194},[117,511,512],{"class":123},"} \n",[117,514,515],{"class":119,"line":200},[117,516,172],{"emptyLinePlaceholder":30},[117,518,519,521,524,527,530,532,535,537,540],{"class":119,"line":206},[117,520,381],{"class":150},[117,522,523],{"class":150}," const",[117,525,526],{"class":181}," use",[117,528,529],{"class":123},"{clipboard}Store ",[117,531,138],{"class":150},[117,533,534],{"class":131}," defineStore",[117,536,390],{"class":123},[117,538,539],{"class":141},"'{clipboard}'",[117,541,542],{"class":123},", {\n",[117,544,545,548,551,553,556,559,562,565,568],{"class":119,"line":215},[117,546,547],{"class":131},"  state",[117,549,550],{"class":123},": ()",[117,552,403],{"class":150},[117,554,555],{"class":123}," {",[117,557,558],{"class":399},"clipboard",[117,560,561],{"class":123},"}",[117,563,564],{"class":131},"Store",[117,566,567],{"class":150}," =>",[117,569,570],{"class":123}," ({ \n",[117,572,573,576,579],{"class":119,"line":221},[117,574,575],{"class":123},"    count: ",[117,577,578],{"class":181},"0",[117,580,581],{"class":123},",\n",[117,583,584],{"class":119,"line":227},[117,585,586],{"class":123},"  }), \n",[117,588,589],{"class":119,"line":237},[117,590,591],{"class":123},"  getters: { \n",[117,593,594,597,600,602,605],{"class":119,"line":242},[117,595,596],{"class":131},"    getCount",[117,598,599],{"class":123},"()",[117,601,403],{"class":150},[117,603,604],{"class":181}," number",[117,606,502],{"class":123},[117,608,609,612,615],{"class":119,"line":251},[117,610,611],{"class":150},"      return",[117,613,614],{"class":181}," this",[117,616,617],{"class":123},".count; \n",[117,619,620],{"class":119,"line":262},[117,621,622],{"class":123},"    }\n",[117,624,625],{"class":119,"line":278},[117,626,627],{"class":123},"  },\n",[117,629,630],{"class":119,"line":288},[117,631,632],{"class":123},"  actions: { \n",[117,634,635,638],{"class":119,"line":297},[117,636,637],{"class":131},"    increment",[117,639,640],{"class":123},"() {\n",[117,642,643,646,649,652],{"class":119,"line":302},[117,644,645],{"class":181},"      this",[117,647,648],{"class":123},".count",[117,650,651],{"class":150},"++",[117,653,654],{"class":123},"; \n",[117,656,657],{"class":119,"line":315},[117,658,659],{"class":123},"    }, \n",[117,661,662],{"class":119,"line":320},[117,663,664],{"class":123},"  } \n",[117,666,668],{"class":119,"line":667},21,[117,669,224],{"class":123},[84,671,673,674],{"id":672},"composable-function-template-cps","Composable Function Template: ",[70,675,676],{},"!cps",[17,678,679,680,682],{},"Composable functions in Vue 3 bring reusability and organization to your code. The ",[70,681,676],{}," snippet offers a template for creating these functions, aiding in maintaining a clean and modular codebase.",[17,684,685,103,687,689],{},[100,686,102],{},[70,688,676],{}," for creating reusable composable functions that can be shared across components, enhancing code reusability and maintainability.",[108,691,694],{"className":353,"code":692,"filename":693,"language":356,"meta":15,"style":15},"export function use{clipboard}() {\n  const {clipboard} = ref(null);\n  \n  // Composable logic\n  \n  return { {clipboard} };\n}\n","~/composables/useComposables.ts",[70,695,696,708,732,737,742,746,754],{"__ignoreMap":15},[117,697,698,700,703,705],{"class":119,"line":120},[117,699,381],{"class":150},[117,701,702],{"class":150}," function",[117,704,526],{"class":131},[117,706,707],{"class":123},"{clipboard}() {\n",[117,709,710,712,714,716,719,721,724,726,729],{"class":119,"line":25},[117,711,420],{"class":150},[117,713,555],{"class":123},[117,715,558],{"class":181},[117,717,718],{"class":123},"} ",[117,720,138],{"class":150},[117,722,723],{"class":131}," ref",[117,725,390],{"class":123},[117,727,728],{"class":181},"null",[117,730,731],{"class":123},");\n",[117,733,734],{"class":119,"line":169},[117,735,736],{"class":123},"  \n",[117,738,739],{"class":119,"line":175},[117,740,741],{"class":439},"  // Composable logic\n",[117,743,744],{"class":119,"line":194},[117,745,736],{"class":123},[117,747,748,751],{"class":119,"line":200},[117,749,750],{"class":150},"  return",[117,752,753],{"class":123}," { {clipboard} };\n",[117,755,756],{"class":119,"line":206},[117,757,758],{"class":123},"}\n",[84,760,762,763],{"id":761},"fetching-data-with-composition-api-fcomp","Fetching Data with Composition API: ",[70,764,765],{},"!fcomp",[17,767,93,768,770],{},[70,769,765],{}," 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.",[17,772,773,775,776,778],{},[100,774,102],{}," Implement ",[70,777,765],{}," in scenarios where you need to fetch data from an API, providing a robust structure for data fetching and state management.",[108,780,782],{"className":110,"code":781,"filename":112,"language":113,"meta":15,"style":15},"\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",[70,783,784,800,842,852,861,865,869,879,890,894,902,906,914,922,944,965,985,1005,1013,1021,1025,1035,1041],{"__ignoreMap":15},[117,785,786,788,790,792,794,796,798],{"class":119,"line":120},[117,787,124],{"class":123},[117,789,128],{"class":127},[117,791,132],{"class":131},[117,793,135],{"class":131},[117,795,138],{"class":123},[117,797,142],{"class":141},[117,799,145],{"class":123},[117,801,802,804,807,810,813,816,818,821,823,826,829,831,834,836,839],{"class":119,"line":25},[117,803,178],{"class":150},[117,805,806],{"class":123}," { ",[117,808,809],{"class":181},"data",[117,811,812],{"class":123},", ",[117,814,815],{"class":181},"pending",[117,817,812],{"class":123},[117,819,820],{"class":181},"error",[117,822,812],{"class":123},[117,824,825],{"class":181},"refresh",[117,827,828],{"class":123}," } ",[117,830,138],{"class":150},[117,832,833],{"class":131}," useFetch",[117,835,390],{"class":123},[117,837,838],{"class":141},"\"your_url\"",[117,840,841],{"class":123},", { \n",[117,843,844,847,850],{"class":119,"line":169},[117,845,846],{"class":123},"  immediate: ",[117,848,849],{"class":181},"false",[117,851,581],{"class":123},[117,853,854,857,859],{"class":119,"line":175},[117,855,856],{"class":123},"  watch: ",[117,858,849],{"class":181},[117,860,581],{"class":123},[117,862,863],{"class":119,"line":194},[117,864,224],{"class":123},[117,866,867],{"class":119,"line":200},[117,868,172],{"emptyLinePlaceholder":30},[117,870,871,874,877],{"class":119,"line":206},[117,872,873],{"class":150},"function",[117,875,876],{"class":131}," loadData",[117,878,640],{"class":123},[117,880,881,884,887],{"class":119,"line":215},[117,882,883],{"class":150},"  await",[117,885,886],{"class":131}," refresh",[117,888,889],{"class":123},"();\n",[117,891,892],{"class":119,"line":221},[117,893,758],{"class":123},[117,895,896,898,900],{"class":119,"line":227},[117,897,230],{"class":123},[117,899,128],{"class":127},[117,901,145],{"class":123},[117,903,904],{"class":119,"line":237},[117,905,172],{"emptyLinePlaceholder":30},[117,907,908,910,912],{"class":119,"line":242},[117,909,124],{"class":123},[117,911,13],{"class":127},[117,913,145],{"class":123},[117,915,916,918,920],{"class":119,"line":251},[117,917,254],{"class":123},[117,919,257],{"class":127},[117,921,145],{"class":123},[117,923,924,926,929,932,934,937,940,942],{"class":119,"line":262},[117,925,265],{"class":123},[117,927,928],{"class":127},"button",[117,930,931],{"class":131}," @click",[117,933,138],{"class":123},[117,935,936],{"class":141},"\"loadData\"",[117,938,939],{"class":123},">Load Data\u003C/",[117,941,928],{"class":127},[117,943,145],{"class":123},[117,945,946,948,950,953,955,958,961,963],{"class":119,"line":278},[117,947,265],{"class":123},[117,949,257],{"class":127},[117,951,952],{"class":131}," v-if",[117,954,138],{"class":123},[117,956,957],{"class":141},"\"pending\"",[117,959,960],{"class":123},">Loading...\u003C/",[117,962,257],{"class":127},[117,964,145],{"class":123},[117,966,967,969,971,973,975,978,981,983],{"class":119,"line":288},[117,968,265],{"class":123},[117,970,257],{"class":127},[117,972,952],{"class":131},[117,974,138],{"class":123},[117,976,977],{"class":141},"\"error\"",[117,979,980],{"class":123},">{{ error }}\u003C/",[117,982,257],{"class":127},[117,984,145],{"class":123},[117,986,987,989,991,993,995,998,1001,1003],{"class":119,"line":297},[117,988,265],{"class":123},[117,990,257],{"class":127},[117,992,952],{"class":131},[117,994,138],{"class":123},[117,996,997],{"class":141},"\"data\"",[117,999,1000],{"class":123},">{{ data }}\u003C/",[117,1002,257],{"class":127},[117,1004,145],{"class":123},[117,1006,1007,1009,1011],{"class":119,"line":302},[117,1008,281],{"class":123},[117,1010,257],{"class":127},[117,1012,145],{"class":123},[117,1014,1015,1017,1019],{"class":119,"line":315},[117,1016,230],{"class":123},[117,1018,13],{"class":127},[117,1020,145],{"class":123},[117,1022,1023],{"class":119,"line":320},[117,1024,172],{"emptyLinePlaceholder":30},[117,1026,1027,1029,1031,1033],{"class":119,"line":667},[117,1028,124],{"class":123},[117,1030,307],{"class":127},[117,1032,310],{"class":131},[117,1034,145],{"class":123},[117,1036,1038],{"class":119,"line":1037},22,[117,1039,1040],{"class":439},"/* composant styles */\n",[117,1042,1044,1046,1048],{"class":119,"line":1043},23,[117,1045,230],{"class":123},[117,1047,307],{"class":127},[117,1049,145],{"class":123},[84,1051,1053],{"id":1052},"why-use-these-snippets","Why Use These Snippets?",[1055,1056,1058],"h4",{"id":1057},"enhance-productivity","Enhance Productivity",[17,1060,1061],{},"Raycast snippets save time and effort by providing ready-to-use code templates, allowing you to focus on the unique aspects of your project.",[1055,1063,1065],{"id":1064},"maintain-consistency","Maintain Consistency",[17,1067,1068],{},"Using standardized snippets ensures consistency across your codebase, making it easier to read, maintain, and collaborate on.",[1055,1070,1072],{"id":1071},"streamline-development","Streamline Development",[17,1074,1075],{},"Snippets cater to common development tasks, streamlining your workflow and reducing the likelihood of errors or oversights.",[1055,1077,1079],{"id":1078},"foster-learning","Foster Learning",[17,1081,1082],{},"For new developers or those new to Nuxt and Vue, these snippets offer insight into best practices and efficient coding patterns.",[17,1084,1085],{},"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.",[307,1087,1088],{},"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":15,"searchDepth":25,"depth":25,"links":1090},[1091,1092],{"id":54,"depth":25,"text":55},{"id":61,"depth":25,"text":62,"children":1093},[1094,1096,1098,1100,1102,1104],{"id":86,"depth":169,"text":1095},"Component Template: !comp",{"id":329,"depth":169,"text":1097},"API Handler Template: !api",{"id":447,"depth":169,"text":1099},"State Management with Pinia: !store",{"id":672,"depth":169,"text":1101},"Composable Function Template: !cps",{"id":761,"depth":169,"text":1103},"Fetching Data with Composition API: !fcomp",{"id":1052,"depth":169,"text":1053},"22/01/2024",{},"/en/articles/5-amazing-raycast-nuxt-snippets","10",{"title":38,"description":50},"en/articles/5-amazing-raycast-nuxt-snippets",[1112,1113,1114,1115],"Nuxt","Vue","Raycast","Productivity","xPtFUGfFOoLhcQWF9FIM38QW2KC3HGzqBD8R2chprWs",{"id":1118,"title":1119,"body":1120,"date":1194,"description":1195,"extension":28,"image":1133,"meta":1196,"navigation":30,"path":1197,"readingTime":1198,"seo":1199,"stem":1200,"tags":1201,"__hash__":1205},"articles_en/en/articles/launch-your-portfolio.md","Finally launch your portfolio",{"type":7,"value":1121,"toc":1183},[1122,1126,1129,1134,1138,1141,1145,1148,1152,1155,1159,1162,1166,1169,1173,1176,1180],[52,1123,1125],{"id":1124},"introduction","Introduction",[17,1127,1128],{},"Creating a portfolio as a development, design or tech professional is a journey punctuated by complex choices. One of the most prevalent of these dilemmas lies in the delicate balance between striving for perfection and the need to launch quickly. Explore with me the nuances of these contradictory perspectives.",[17,1130,1131],{},[44,1132],{"alt":46,"src":1133},"/articles/launch-your-porfolio.jpg",[84,1135,1137],{"id":1136},"the-aspiration-to-perfection-an-unattainable-ideal","The aspiration to perfection: an unattainable ideal?",[17,1139,1140],{},"The traditional vision of artistic creation encourages us to pursue perfection from the outset. Every line of code, every element of design should converge towards absolute excellence. However, this dream of perfection can sometimes become a burden, a brake on progress. The relentless quest for perfection can paralyze the creative process, turning creation into an endless pursuit.",[84,1142,1144],{"id":1143},"the-perfectionism-trap-when-the-best-becomes-the-enemy-of-the-good","The Perfectionism Trap: when the best becomes the enemy of the good",[17,1146,1147],{},"Perfectionism can turn into a subtle trap. Waiting for every detail to be impeccable can delay your portfolio indefinitely. This prolonged stalling can have implications for professional credibility, as the market often demands a fast, dynamic online presence.",[84,1149,1151],{"id":1150},"the-bold-proposal-to-launch-quickly-iterate-rather-than-perfect","The bold proposal to launch quickly: iterate rather than perfect",[17,1153,1154],{},"The idea of launching quickly, even if the portfolio doesn't reach an immediate level of perfection, offers an alternative perspective. It's about recognizing that each iteration can be an improvement on the previous one. This approach encourages a constant iteration mentality, where each version becomes a learning opportunity.",[84,1156,1158],{"id":1157},"speed-as-a-means-of-learning-create-by-doing","Speed as a means of learning: create by doing",[17,1160,1161],{},"Launching quickly thus becomes a means of learning. Speed doesn't mean compromising on quality, but rather accepting that perfection may initially be unattainable. It's an invitation to learn by doing, to use each version of the portfolio as a testing ground.",[84,1163,1165],{"id":1164},"the-crucial-importance-of-time-time-efficiency-and-judicious-management","The crucial importance of time: time efficiency and judicious management",[17,1167,1168],{},"Time plays a crucial role in this debate. Time efficiency, underlined by the perspective of speed, becomes an essential skill. Judicious time management is the key to maintaining momentum without compromising quality. Consciously choosing where to invest one's time becomes a strategic act.",[84,1170,1172],{"id":1171},"total-control-vs-flexibility-navigating-between-the-two-extremes","Total control vs. flexibility: navigating between the two extremes",[17,1174,1175],{},"Total control of the creative process offers a sense of autonomy and empowerment. However, it is vital not to confuse control with rigidity. Being open to market developments and new trends is just as essential as personal control. It's a delicate balance between autonomy and adaptability.",[84,1177,1179],{"id":1178},"the-delicate-balance-a-continuous-journey-of-discovery-and-adaptation","The delicate balance: a continuous journey of discovery and adaptation",[17,1181,1182],{},"Ultimately, portfolio creation is an ongoing journey. It's navigating this paradox with intention. It's finding a balance between the quest for excellence and the need to move quickly, knowing that each iteration is a progression towards an improved version of yourself. To create a portfolio is to embrace the paradox, to consciously choose between perfection and speed, and to accept that the path to excellence is a journey rather than a destination.",{"title":15,"searchDepth":25,"depth":25,"links":1184},[1185],{"id":1124,"depth":25,"text":1125,"children":1186},[1187,1188,1189,1190,1191,1192,1193],{"id":1136,"depth":169,"text":1137},{"id":1143,"depth":169,"text":1144},{"id":1150,"depth":169,"text":1151},{"id":1157,"depth":169,"text":1158},{"id":1164,"depth":169,"text":1165},{"id":1171,"depth":169,"text":1172},{"id":1178,"depth":169,"text":1179},"20/10/2023","Aiming for perfectionism is a very good state of mind. On the other hand, working until perfectionism is 100% can also be bad. Here are some tips to help you get your portfolio off the ground.",{},"/en/articles/launch-your-portfolio","5",{"title":1119,"description":1195},"en/articles/launch-your-portfolio",[1202,1203,1204,1115],"Portfolio","Development","Design","OkmwcAvKYdEkWRQekkYc2DcpEEQaD270vruhg4uow04",{"id":1207,"title":1208,"body":1209,"date":1239,"description":1240,"extension":28,"image":1215,"meta":1241,"navigation":30,"path":1242,"readingTime":1243,"seo":1244,"stem":1245,"tags":1246,"__hash__":1248},"articles_en/en/articles/not-an-impostor.md","You are not an impostor",{"type":7,"value":1210,"toc":1237},[1211,1216,1219,1222,1225,1228,1231,1234],[17,1212,1213],{},[44,1214],{"alt":46,"src":1215},"/articles/trap-of-perfection.jpg",[17,1217,1218],{},"In the theater of content creation, there are many who, backstage, whisper a phrase tinged with doubt: \"I'm not legitimate, others are so much better\". This melody of insecurity, often played over and over in the minds of emerging creators, is the first act of a much larger work: the conquest of one's own legitimacy.",[17,1220,1221],{},"Imagine yourself standing at the edge of the stage, dazzled by the spotlight of self-judgment. Every creator goes through this. But instead of sinking into the shadows of self-deprecation, take a moment to listen to the whispers of the audience: the other creators. What you hear is not a cacophony of criticism, but a chorus of experiences and lessons.",[17,1223,1224],{},"This is where the magic happens. Instead of seeing the stage as a place for competition, turn it into a space for learning. Let other people's successes inspire you, their mistakes teach you. This is not imitation, but a creative harmony where you can find your own rhythm, your own melody.",[17,1226,1227],{},"Your authenticity is your most precious instrument. Play it with confidence. Every note of your experience, your perspective, resonates in a unique way with your audience. Authenticity is a creator's true opus, far more captivating than the exhausting quest for perfection.",[17,1229,1230],{},"Remember, every creation is a rehearsal for the next. There's no grand finale where everything has to be perfect. It's a continuous concert, where each performance is better than the last.",[17,1232,1233],{},"And in this showroom, you're not alone. Backstage, you'll find plenty of mentors, peers and admirers. They're there to encourage you, to guide you, to applaud your successes and support you in your doubts. This community is your chorus of support, turning fearful solos into courageous duets.",[17,1235,1236],{},"In the end, every curtain raised, every light turned on, is a step closer to accepting your own talent. The feeling of imposture dissipates not when you compare yourself to others, but when you recognize the unique beauty of your own performance. In this room, success is measured not just by the applause at the end, but by the courage to get up on stage and say: \"Here's my story, listen to it\".",{"title":15,"searchDepth":25,"depth":25,"links":1238},[],"11/01/2024","In the theater of content creation, many backstage whisper a phrase tinged with doubt. This melody of insecurity is the first act of a much larger work the conquest of one's own legitimacy.",{},"/en/articles/not-an-impostor","3",{"title":1208,"description":1240},"en/articles/not-an-impostor",[1247,1115],"Creation","Bix32_w5TbqqrbTtnb0t3vncc242lpQfRR1Nd-eYkZQ",1774326689023]