This is a starter template that pre-includes the Pinegrow Vite Plugin, Pinegrow Tailwind CSS Plugin and other goodies for Vue Designer.
Demo - https://pg-vue-tailwindcss.netlify.app/
A desktop visual editor for Vue apps supporting Mac, Windows, and Linux by Pinegrow. Take it for a free trial at Vue Designer!
It lets you visually design π¨ your Vue single file components and boosts your productivity and creativity while building your component-based Vue apps.
It smartly integrates with your β‘οΈ Vite based CLI and provides an amazing developer experience with its powerful visual controls and features.
Clean code π, No lock-in - You are in control of your projects and development workflow β€οΈ
Create a repo from this template on GitHub.
(or)
If you prefer to do it manually with the cleaner git history
npx giget@latest gh:pinegrow/pg-vue-tailwindcss my-vue-tailwindcss-app #project-name
cd my-vue-tailwindcss-app
npm install #or use pnpm
(or)
If you prefer a blank template (a single empty home page) instead,
npx giget@latest gh:pinegrow/pg-vue-tailwindcss#blank my-vue-tailwindcss-app #project-name
cd my-vue-tailwindcss-app
npm install #or use pnpm
Open your project in Vue Designer and follow the instructions displayed in the Config Panel (that should pop out automatically). Config Panel βοΈ displays the key packages and the various links to their individual ecosystems and communities.
npm run dev
npm run build
Uncomment the rollup-plugin-visualizer
usage in your config file and execute the build
command. This command will generate stats.html
. Open stats.html
in your browser to analyze bundle sizes.
npm run build # open stats.html to analyze bundle sizes
npm run now # build & preview
npm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)
You can deploy this repo as a site on your own to explore and experiment with, by clicking this button.
Check out the deployment documentation for more information.
- Vite - Vite-powered Vue SPA
- π Follow the amazing Vue docs
- π¦ Vue-Router for client-side routing. Expressive, configurable, convenient enables snappy navigation.
- Tailwind CSS - The amazing utility-first CSS framework.
- unplugin-vue-markdown - file-based CMS powered by Markdown & Vue components. Note: This page is a markdown file π.
- UnoCSS Preset Icons - use over 100,000 open-source Iconify icons. Uses the unocss format for icon names, for example,
i-mdi-home
.
- Pinegrow Vite Plugin - enables you to live-design your Vue single-file components visually in Vue Designer.
- Pinegrow Tailwind CSS Plugin - via Design Panel, enables visual controls customization (automatic) and theme customization (optional).
- unplugin-vue-router - Next-gen file based routing with type support for Vue Router.
- vite-plugin-vue-layouts - Router based layout for Vue applications using Vite.
- π² unplugin-vue-components - On-demand components auto importing for Vue.
- π² unplugin-auto-import - Auto import APIs on-demand for Vite, Webpack and Rollup.
- VueUse - collection of essential Vue composition utilities.
- π Pinia stores for global state management. Its light-weight, type-safe, extensible, modular with vue-devtools support.
- VeeValidate takes care of value tracking, validation, errors, submissions and more.
- Vite Devtools - A Vite plugin for Vue that enhances your DX (developer experience) with an amazing set of in-app features. This is an in-app alternative to browser-based/standalone Vue Devtools.
- Vue Devtools - Official devtools that can be used as a standalone app alongside Vue Designer. It's conditionally configured in
main.ts
(only during development).- ACTION REQUIRED: Currently deactivated. In
main.ts
, uncomment the top devtools related snippet to activate.
- ACTION REQUIRED: Currently deactivated. In
- Use Composition API with
<script setup>
SFC syntax - ESLint with eslint-plugin-vue - official set of linting rules.
- Prettier with @vue/eslint-config-prettier - format without conflicting with eslint rules.
This project allows JS, and strict mode is turned off. Update tsconfig.ts
as required.
{
"compilerOptions": {
// ...
"strict": false,
"allowJs": true
}
}