DEV Community

Cover image for Vite vue ts tailwind template: Create repo from vue-ts template
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on

Vite vue ts tailwind template: Create repo from vue-ts template

Generate repo from template

  1. In our previous series Creating vite vue ts template we created vue-ts template. We will use it to create our new vue-ts-tailwind template.
  2. Start by pressing + in github's navbar and select New repository. New repository
  3. Select vue-ts as Repository template and check Include all branches.
  4. Set Repository name to vue-ts-tailwind and press Create repository. Create repo from vue-ts template

Configure github repository

  1. Make this repo a Template repository as we did in
  2. Enable Depandabot alerts

Update project to mention TailwindCSS

  1. Update badges and title in README.md.

    -[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/imomaliev/vue-ts/main.svg)](https://results.pre-commit.ci/latest/github/imomaliev/vue-ts/main)
    -![ci](https://github.com/imomaliev/vue-ts/actions/workflows/ci.yml/badge.svg)
    +[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/imomaliev/vue-ts-tailwind/main.svg)](https://results.pre-commit.ci/latest/github/imomaliev/vue-ts-tailwind/main)
    +![ci](https://github.com/imomaliev/vue-ts-tailwind/actions/workflows/ci.yml/badge.svg)
    
    -# Vue 3 + Typescript + Vite + Jest
    +# Vue 3 + Typescript + Vite + Jest + TailwindCSS
    
    -This template should help get you started developing with Vue 3 and Typescript in Vite.
    +This template should help get you started developing with Vue 3, Typescript and TailwindCSS in Vite.
    
  2. Update project name and deploy script in package.json

     {
    -  "name": "vite-vue-typescript-starter",
    +  "name": "vite-vue-typescript-tailwind-starter",
       "version": "0.0.0",
       "scripts": {
         "dev": "vite",
         "build": "vue-tsc --noEmit && vite build",
    -    "deploy": "vue-tsc --noEmit && vite build --base '/vue-ts/'",
    +    "deploy": "vue-tsc --noEmit && vite build --base '/vue-ts-tailwind/'",
    
  3. Add TailwindCSS to components
    In src/App.vue

    -  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
    +  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite + Tailwind" />
    

    and in src/components/HelloWorld.vue

         >
    +    |
    +    <a href="https://tailwindcss.com/docs/installation" target="_blank"
    +      >TailwindCSS Docs</a
    +    >
       </p>
    
  4. Update package-lock.json

    $ npm install
    
  5. git add -u

  6. git commit -m 'mention tailwind'

Links

Project

GitHub logo imomaliev / vue-ts-tailwind

Template vite vue typescript tailwind

Discussion (0)