Vue Designer Nuxt Tailwind CSS - Quick start template

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

Vue Designer

A desktop drag-and-drop editor for Vue apps supporting Mac, Windows and Linux by Pinegrow.

It let's you visually design 🎨 your Vue single file components and boosts your productivity and your creativity while building your component-based Vue apps.

It smartly integrates with your ⚡️ Vite based CLI, and provides an amazing deverloper experience with it's powerful visual controls and features.

Clean code, No lock-in 😃

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-nuxt-tailwindcss my-nuxt-tailwindcss-app #project-name
cd my-nuxt-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 ecosystem and community.

Usage

Start your development server

npm run dev

Build

npm run build # SPA SSR
npm run generate # SPA SSG (full-static)

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

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your app will be live in a minute.

Check out the deployment documentation for more information.

Pre-packed

Meta Framework (Vue-based)

• Nuxt - The Intuitive Vue Framework
  • 👉 Follow the Nuxt docs for the amazing list of features

UI Frameworks

• Tailwind CSS - The amazing utility-first CSS framework.

Filed-based CMS (markdown)

• Nuxt Content - file-based CMS for powered by Markdown & Vue components. Note: This page is a markdown file 🗒

Icons

• Nuxt Icon - use over 100,000 open-source Iconify icons.

Modules/Plugins

• Pinegrow Nuxt Module - 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).

Devtools

• Nuxt Devtools - Enhance your DX (developer experience) with an amazing set of in-app features.

• Vue Devtools - Official devtools that can be used as a standalone app alongside Vue Designer. It's configured as a Nuxt plugin (only during development).

Deployment

• Netlify - zero-config deployment

VS Code Extensions

• VS Code Extensions
  • Volar - Vue 3 <script setup> IDE support
  • ESLint
  • Prettier

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @nuxt/eslint-config - opinionated not-so-strict set of linting rules.
• Prettier with eslint-config-prettier - format without conflicting with eslint rules.

Community

• Pinegrow Vue Designer