DEV Community

Cover image for Vite.js + Vue 3 + router + vuex + tailwindcss template
Jorge Arraga
Jorge Arraga

Posted on

Vite.js + Vue 3 + router + vuex + tailwindcss template

#vite #vue #vuex #tailwindcss

Github CLI usage

If you don't use github CLI to manage yours repositories I recommend that you do it. Install here

gh auth login
Enter fullscreen mode Exit fullscreen mode

Then you can create a repo using this code as a template, the command will create your repo directory.

gh repo create <ownRepoName> --private --template jarraga/vite-vue3-template
Enter fullscreen mode Exit fullscreen mode 
? This will create the "<ownRepoName>" repository on Github, Continue? (Y/n) -> YES
Enter fullscreen mode Exit fullscreen mode 
? Create a local project directory for "<ownRepoName>"? (Y/n) -> YES
Enter fullscreen mode Exit fullscreen mode

Ok, you have new repository created on Github and local files to start coding.
Let's install dependencies and run dev server.

cd <ownRepoName>
npm i
npm run dev
Enter fullscreen mode Exit fullscreen mode

And that's it, open folder with your code editor and start make changes.

Recomended plugins if you're using visual studio code:

vetur

tailwind

Thing to keep in mind for tailwindcss

If you want to make components using dynamic tailwind classes, you have to literal write the entire classes in an object and acces to it, instead of use something like bg-${color}-300
Simon explain this in detail in this video:

https://youtu.be/HZn2LtBT59w?t=509

I hope you find it useful! 👋🏽

Top comments (3)

Collapse
 
fullzero5 profile image
FullZero • • Edited

Hi, tell me I didn't see how to add an alias @?

resolvers: [
    {
      alias: [
        {
          '@': path.resolve(__dirname, './src'),
        }
      ]
    },
]
Enter fullscreen mode Exit fullscreen mode

does not work

Collapse
 
jarraga profile image
Jorge Arraga •

Hi! your vite.config.js should look like this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

Tell me if it works!

Collapse
 
fullzero5 profile image
FullZero •

Thanks!

Read next

sambowenhughes profile image

Building a Web-Based Video Editor with Remotion, Next.js, and Tailwind CSS

Sam Bowen-Hughes -

boopykiki profile image

Modern Web Development with Turborepo, Next.js, TailwindCSS, NestJS, and More…

BoopyKiki -

dharamgfx profile image

Vue.js: Option API vs. Composition API - Which One is Right for You? 🤔

Dharmendra Kumar -

developpeurtaf profile image

Déploiement d’un Projet Laravel sur Vercel et Astuces pour Gérer les Fichiers JS et CSS

Fabrice -