Skip to content

Latest commit

 

History

History
128 lines (82 loc) · 5.45 KB

README.md

File metadata and controls

128 lines (82 loc) · 5.45 KB
Raw

Vue Designer CSS - Quick start template

This is a starter template that pre-includes the Pinegrow Vite Plugin and other goodies for Vue Designer.

Demo - https://pg-vue-css.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-vue my-vue-app #project-name
cd my-vue-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

Preview

npm run now # build & preview

Build

npm run build # SPA

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

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 (Vue-based)

  • Vite - Vite-powered Vue SPA
    • 👉 Follow the amazing Vue docs
    • 🚦 Vue-Router for client-side routing. Expressive, configurable, convenient enables snappy navigation.

UI Frameworks

  • CSS - Scoped CSS in Vue Single File Component (SFC).

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 Vite Plugin - enables you to live-design your Vue single-file components visually in Vue Designer.
  • 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.

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.
  • 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.
    • ACTION REQUIRED: Currently deactivated. In vite.config.ts, uncomment VueDevtools.

VS Code Extensions

Coding Style

Typescript

Allows JS & strict mode is turned off. Update tsconfig.app.json or tsconfig.ts as required.

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

Community