Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse Template.

Related tags

Scaffold template vue vue-router pnpm tailwindcss tailwind-css vite tailwind-css-template vueuse vite-template pinia tailwindcss-v3
Overview

Vite-Boot

Vitesse - Opinionated Vite Starter Template

Mocking up web app with Vite-Boot (speed)

English | 简体中文

Features

First-party plugins needed for Tailwind UI:

Coding Style

Recommended IDE Setup

directory

# vite-boot
├── LICENSE
├── README.assets                  
│   └── vite-vue-tailwind.png
├── README.md
├── README.zh-CN.md
├── index.html
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js        # tailwind configuration
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── api                  # api interface
│   ├── assets               # static resource
│   │   └── logo.png
│   ├── components           # global component
│   │   └── Navbar.vue       # Navbar component
│   ├── env.d.ts
│   ├── main.ts
│   ├── router               # Vue router
│   │   └── index.ts
│   ├── settings.ts          # global configuration
│   ├── store                # Pinia store   
│   │   ├── counter.ts
│   │   └── index.ts
│   ├── styles               # global style 
│   │   ├── main.scss        
│   │   ├── nprogress.scss   # nprogress style 
│   │   ├── tailwind.css
│   │   └── variables.scss
│   ├── utils                # global public method
│   │   └── darkMode.ts
│   └── views                # all pages
│       └── Index.vue
├── tailwind.config.js       # tailwind configuration
├── tsconfig.json            # TS compilation configuration 
└── vite.config.ts           # Vite configuration

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

npx degit kirklin/vite-boot my-vite-app
cd my-vite-app
pnpm i

Usage

Development

Just run and visit http://localhost:8888

pnpm run dev

Build

To build the App, run

pnpm run build

And you will see the generated file in dist that ready to be served.

You might also like...
Vue 3 + Typescript + Vite + Tailwind + AnimXYZ

Vue 3 + Typescript + Vite + Tailwind + AnimXYZ This template should help get you started developing with Vue 3 and Typescript in Vite. The template us

M Atif 8 Dec 6, 2022
Vite + Vue 3 + Tailwind CSS (starter) ⚡
Vite + Vue 3 + Tailwind CSS (starter) ⚡

Vite + Vue 3 + Tailwind CSS (starter) ⚡ This starter template also includes: Tailwind CSS v3.0.0-alpha ⚠ Vue Router 4.x Inter var font (self-hosted, w

null 1 Oct 11, 2021
An e-commerce website using Vue, typescript , pinia store, and service layer design pattern.

An e-commerce website using Vue, typescript , pinia store, and service layer design pattern. Don't bother about how the repository name fits the description.,Github suggested it. I would have used an

Cheedinmar 1 Oct 29, 2021
Nuxt3 (Nuxt 3) best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite

Nuxt 3 Starter We recommend to look at the documentation. Preview Deploy your own This starter template also includes: Tailwind CSS v3.0.0-alpha ⚠ Hea

Mehmet 386 Dec 28, 2022
Vue3 + vite2 + Typescript + electron 13 + tailwind

Vue 3 + Typescript + Vite 2 + Tailwindcss + Electron 13 + Elctron-builder with preconfiged sample windows app Required Enviroments Nodejs = 14.0.0 MS

null 9 Jun 4, 2022
⚡ A starter example with Nuxt3 + Windi CSS + Iconify + Element-plus + Pinia + Docker

Nuxt3 + Windi CSS + iconify + element-plus 创建项目 简介 Nuxt 3 - The Hybrid Vue Framework (nuxtjs.org) Build your next application with Vue 3 and experienc

西北盲流子 8 Dec 14, 2022
Dashboard starter template built with Vue 3 and Tailwind CSS.
Dashboard starter template built with Vue 3 and Tailwind CSS.

Dashboard starter template built with Vue 3 and Tailwind CSS.

Robert Soriano 767 Jan 2, 2023
Vue-typescript-starter-project - Vue3, Vuex, Vue-router starter project using typescript

Vue Typescript Starter Project Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production

paalan 0 Jan 1, 2022
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）
这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）

介绍 基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。 线上预览 vue3.x 版本

null 785 Jan 2, 2023
Comments
  • Error with missing xdg-utils package

    Error with missing xdg-utils package

    Describe the bug/issue

    I had a problem installing vite-boot on multiple servers and the issue were not that obvious to find. You need the package xdg-utils in order to be able to serve your project (error arriving when running dev) which is not the case in many non gui environnements like servers. To correct this you just have to install it with your prefered system package manager : $ apt install xdg-utils --fix-missing Hope this helps !

    opened by elalitte 2
Owner
Kirk Lin
A FullStack Developer
Kirk Lin
GitHub https://vite-boot.netlify.app/
Template creates with Vite that includes a Vue 3 app template with routes and store. Regarding css we use Tailwind CSS

Template creates with Vite that includes a Vue 3 app template with routes and store. Regarding css we use Tailwind CSS

Marco 4 Aug 3, 2022
Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀

Vue TypeScript Starter This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup>

Yuga Sun 30 Dec 24, 2022
Vue 3 boilerplate - Vite, Pinia, Vue Router & Tailwind CSS

Quick boilerplate for your next project, containing - Vite, Vuex, Vue Router & Tailwind CSS. This was created as part of my tutorial series.

richardev 29 Nov 22, 2022
Vue3 + Vite + WindiCSS (Tailwind) Boilerplate for quick starting your Vue3 app with full support for tailwind

Use this boilerplate to quickly start your Vue3 project with WindiCSS (TailwindCSS), using vite as the build tool. Run the development server git clon

Hasin Hayder 9 Aug 2, 2022
fit-vue3-boilerplate: Vue 3 + Typescript + Vite + Pinia + File Based Routing

fit-vue3-boilerplate demo: https://castrix.github.io/fit-vue3-boilerplate/ installation: npm install run development: npm run dev build: npm run bui

Ihsan Fajar Ramadhan 6 Apr 11, 2022
Vue3-ts-boilerplate - Packed Vue3 boilerplate with storybook, unit testing, generators, typescript, pinia, vue-router

Vue3 TS Boilerplate This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur).

Jeff Fasulkey 5 Nov 11, 2022
Nuxt 3 Minimal Starter with VueUse and WindiCSS

Nuxt 3 Minimal Starter with VueUse and WindiCSS Documents Nuxt 3 VueUse Windi CSS Setup Make sure to install the dependencies yarn install Development

TANAKA Kohji 9 Oct 1, 2022
Vue 3 starter template: Vite / Vue 3 / Tailwind CSS / PNPM

Vue.js starter template Features: ?? Vue 3 ⚡️ Vite ?? PNPM ?? Vue Router ?? Tailwind CSS ?? Eslint with airbnb and stylelint ?? Light and dark mode co

Léonard Lecouey 44 Jan 2, 2023
A Vue3 starter project setup with Vite, Vue-meta, Router, Vuex, Eslint, Prettier, Tailwind CSS, and some custom preferences.

A Vue3 starter project setup with Vite, Vue-meta, Router, Vuex, Eslint, Prettier, Tailwind CSS, and some custom preferences.

Shamim Hossain 112 Jan 5, 2023
Vue3+Vite+elementPlus+mockJs+pinia+Scss （javaScript）

Vue3+Vite+elementPlus+mockJs+pinia+Scss （javaScript）

James 2 Feb 21, 2022