Pinegrow îles Tailwind CSS - Quick start template

A Basic îles Tailwind CSS app that pre-includes the Pinegrow îles Module and other goodies for Vue Designer app.

Vue Designer (WIP)

Vue Designer is a desktop drag-and-drop editor for Vue apps 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!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit vue-designer/pg-iles-tailwindcss my-iles-tw-app
cd my-iles-tw-app
npm install

Usage

Open your project in Vue Designer, and follow the instructions displayed in the Config Panel (that should pop-out automatically).

Start your development server

npm run dev

Build

To build the App, run

npm run build

And you will see the generated file in dist that 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 Frameworks (Vue-based)

• îles - A Joyful Site Generator.
  • 🏝 [Partial Hydration] - zero JS by default, hydrates the interactive bits
  • 🔌 [Batteries Included] - layouts, components, site-wide data
  • 🧱 [Multi-Framework] - vue, preact, svelte, solid
  • 📖 [Markdown] - use components in markdown and viceversa
  • 🛣 [Routing] - automatically configured from files
  • 🛠 [Devtools][devtools] - debug panel and [hydration timeline]
  • ⚡️ [Fast][vite] - instant reloading powered by [Vite]

UI Frameworks

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

Icons

• UnoCSS Preset Icons - use over 100,000 open-source Iconify icons.

Modules/Plugins

• Pinegrow îles Module - enables you to live-design your Vue single-file-components visually in Vue Designer.

• Pinegrow Tailwind CSS Plugin - enables visual controls customization and theme customization (via Design Panel).

Devtools

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

• îles Devtools - Page information is available in the in-app debug panel (similar to Vitepress). Also access the "Islands" inspector in Vue devtools.

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. Nuxt & îles share a similar directory structure, so are their linting rules.
• Prettier with eslint-config-prettier - Format without conflicting with eslint rules.

Community

• Pinegrow

Vue Designer's Config Panel displays the key packages and the various links to their individual ecosystem and community.