How to setup VueJS 3 with Vite, UnoCSS and ESLint/Prettier

This is an updated version of <a href="https://medium.com/@jdmendozar/how-to-setup-vue-3-with-vite-tailwind-and-eslint-prettier-b55644005c76" rel="noopener">this article</a>. This other article is now 2 years old and I’ve picked up some other tools since then. So now I’m using <a href="https://pnpm.io/" rel="noopener ugc nofollow" target="_blank">pnpm</a> instead of yarn, and <a href="https://unocss.dev/" rel="noopener ugc nofollow" target="_blank">unocss</a> instead of tailwindcss. Let’s start by opening a terminal and typing: <pre> pnpm create vite todos</pre> It will ask if you want to use a JavaScript framework. Let’s go with Vue. It will also add if you want to use TypeScript or JavaScript. I will strongly suggest to select TypeScript instead of JavaScript and gradually add some TypeScript into your code. Now move into the folder, install the dependencies and start it. <pre> cd todos pnpm i pnpm dev</pre> This will start the vite server on port 5173 by default, so if you open it in a browser you’ll see something like this: <img alt="" src="https://miro.medium.com/v2/resize:fit:630/1*NhpCmvpop4V3SIcTrcA1Sg.png" style="height:604px; width:700px" /> Like I mentioned at the beginning of the post, I’ve started using UnoCSS instead of TailwindCSS after reading <a href="https://antfu.me/posts/reimagine-atomic-css" rel="noopener ugc nofollow" target="_blank">this post</a> by Anthony Fu. <a href="https://jdmendozar.medium.com/how-to-setup-vuejs-3-with-vite-unocss-and-eslint-prettier-5f53d0265233">Click Here</a>