Quick Start

Github repo for this template
Click here

Vue Designer Astro PrimeVue Tailwind CSS - Quick start template

This is a starter template that pre-includes the Pinegrow Astro Module, PrimeVue, Pinegrow PrimeVue Plugin, Pinegrow Tailwind CSS Plugin and other goodies for Vue Designer.

Demo - https://pg-astro-primevue-tailwindcss.netlify.app/

Vue Designer

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 ❤️

Try it now!

1. Clone to local

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-astro-primevue-tailwindcss my-astro-primevue-tailwindcss-app #project-name
cd my-astro-primevue-tailwindcss-app
npm install #or use pnpm

(or)

If you prefer a minimal template (a single empty home page) instead,

npx giget@latest gh:pinegrow/pg-astro-primevue-tailwindcss#minimal my-astro-primevue-tailwindcss-app #project-name
cd my-astro-primevue-tailwindcss-app
npm install #or use pnpm

2. Open in Vue Designer

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.

Usage

Start your development server

npm run dev

Build

npm run build # MPA SSG (islands architecture)

Analyze

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

Preview

npm run now # build & preview

Lighthouse

npm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)

Deploy to Netlify

You can deploy this repo as a site on your own to explore and experiment with, by clicking this button. Deploy to Netlify

Check out the deployment documentation for more information.

Pre-packed

Meta Framework

  • Astro - Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
    • 🏝 [Partial Hydration] - zero JS by default, hydrates the interactive bits
    • 🔌 [Batteries Included] - layouts, components, site-wide data
    • 🧱 [Multi-Framework] - vue, react, preact, svelte, solid, etc
    • 📖 [Markdown] - use components in markdown and viceversa
    • 🛣 [Routing] - automatically configured from files
    • ⚡️ [Fast][vite] - instant reloading powered by [Vite]

UI Frameworks

  • PrimeVue - PrimeVue is a complete UI suite for Vue.js consisting of a rich set of UI components, icons, blocks, and application templates.
  • Tailwind CSS - The amazing utility-first CSS framework.

Icons

  • UnoCSS Preset Icons - use over 100,000 open-source Iconify icons. Uses the unocss format for icon names, for example, i-mdi-home.

Modules/Plugins

  • Pinegrow Astro Module - enables you to live-design your Vue single-file components visually in Vue Designer.
  • Pinegrow PrimeVue Plugin - via Design Panel, enables theme customization (optional) and visual controls for Primevue utilities. Note: This is an addon that’s licensed separately to Pinegrow apps (like Vue Designer).
  • Pinegrow Tailwind CSS Plugin - via Design Panel, enables visual controls customization (automatic) and theme customization (optional).
  • 📲 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.

Devtools

  • 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.

VS Code Extensions

  • [VS Code Extensions](./.vscode/extensions.json & ./.vscode/settings.json)

Coding Style

Typescript

This project allows JS, and strict mode is turned off. Update tsconfig.ts as required.

{
  "compilerOptions": {
    // ...
    "strict": false,
    "allowJs": true
  }
}

Community