Build a Vue-Typescript application using Vite

This guide will help you set up a Vue-Typescript application using Vite, a modern frontend build tool.

Prerequisites

• Node.js (v14 or later)
• npm (v6 or later)
• Basic knowledge of Vue.js and TypeScript
• Basic knowledge of Vite
• Basic knowledge of Tailwind CSS
• Basic knowledge of Vitest
• Basic knowledge of Testing Library

1. Create a new Vite project

npm create vite@latest my-vue-app --template vue-ts

2. Change directory to the new project

cd my-vue-app

3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Open your browser and navigate to http://localhost:5173/ to see your new Vite app running.
6. Build the project for production

npm run build

7. Preview the production build

npm run preview

8. Open your browser and navigate to http://localhost:4173/ to see the production build.

9. To deploy the app, you can copy the contents of the dist folder to your web server.

10. To add a new component, create a new file in the src/components directory and import it into your main app file (e.g., src/main.ts).

11. To add a new route, you can use a routing library like vue-router and configure it in your main app file.

12. To add state management, you can use a state management library like Pinia or Vuex and configure it in your main app file.

13. To add CSS, you can create a new CSS file in the src/assets directory and import it into your main app file.

Add Tailwind CSS to Vite

1. Install Tailwind CSS and its dependencies

npm install tailwindcss @tailwindcss/vite

2. Configure the Vite plugin, add the @tailwindcss/vite plugin to your Vite configuration.

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()
  ]
})

3. Import Tailwind CSS by Add an @import to your CSS file that imports Tailwind CSS.

/* src/stylee.css */
@import "tailwindcss";

4. Install Vitest for testing

npm install -D vitest

npm install -D vitest @testing-library/vue @testing-library/jest-dom

5. Add vitest in package.json

{
  "scripts": {
    "test": "vitest",
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage",
    "test:ci": "vitest --ci",
    "test:debug": "vitest --debug"
  }
}

{
  "devDependencies": {
    "vitest": "^0.1.0",
    "@testing-library/vue": "^6.0.0",
    "@testing-library/jest-dom": "^5.16.4"
  }
}

6. Create a test file

// src/components/HelloWorld.spec.ts
import { render } from '@testing-library/vue'
import HelloWorld from './HelloWorld.vue'
import '@testing-library/jest-dom'
import { describe, it, expect } from 'vitest'
describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const { getByText } = render(HelloWorld, {
      props: { msg: 'Hello Vite + Vue 3 + TypeScript!' }
    })
    expect(getByText('Hello Vite + Vue 3 + TypeScript!')).toBeInTheDocument()
  })
})

7. Run the tests

npm run test