Vite + Vue 3(composition API) + Typescript + TailwindCSS Starter App

Simple, opinionated, fully typed, and production-ready project template for Vite.

Demo View in Surge

Features

• Vue 3.2
• Vite for the frontend build tooling, instead of Vue Cli
• Using Composition API syntax(see the official Script Setup documentation)
• Fully typed Vuex 4 store
• Routing using vue-router 4
• TypeScript 4.5
• Tailwind CSS 3.0 w/ following plugins preinstalled:
  • @tailwindcss/aspect-ratio
  • @tailwindcss/line-clamp
  • @tailwindcss/typography
  • @tailwindcss/forms
  • firefox-variant
• Pulling up API requests using rxjs and axios. (By using from conversion function from rxjs to convert the promises to observables. Why observerble is better than Promise? You can do much more with it! rxjs provides tons of operators to let you gracefully control your request.

  Axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .pipe(
  	retry(3)
  )
   .subscribe(
    response => console.log(response),
    error => console.log(error)
  );

Advantage is that you don't have to write any custom observer, handling the success and error response and cancel request are all defined correctly by you.)

• PostCSS 8 w/ postcss-nesting plugin
• Eslint and Prettier for code styling
• Chart.js for the data visualization
• date-fns date/time handling.
• Alias @ to <project_root>/src
• Manually configured global components in main.ts
• // Cypress.io e2e tests (configured similarly to vue-cli)
• // Cypress.io component tests

---

To get started:

1. Clone the repository:

   git clone https://github.com/ironwebstar/Vite-Vue3-TailwindCSS-Typescript.git
   
   cd Vite-Vue3-TailwindCSS-Typescript

2. Install the dependencies:

   # Using npm
   npm install
   
   # Using Yarn
   yarn

3. Start the development server:

   # Using npm
   npm run dev
   
   # Using Yarn
   yarn dev

   Now you should be able to see the project running at localhost:3000.

4. Lint code using ESLint and Vue, Prettier, typescript configs

   # Using npm
   npm run lint
   npm run lint:fix
   
   # Using Yarn
   yarn lint
   yarn lint:fix

5. Open src/* and start experimenting!

Building for production

To build an optimized version of your CSS, simply run:

# Using npm
npm run build

# Using Yarn
yarn build

After that's done, check out dist to see the optimized output.

---