This repository was live-designed with Vue Designer by following the free YouTube course "Pizzeria Static HTML into Vue Islands with 🏝 Iles, Vitepress & Astro", which is part of the "Learn With Vue Designer" series. Check it out here.
"Pizzeria" is a simple MPA-SSG for a pizza shop that displays a list of pizzas in its store and allows users to add the pizzas to a cart. The cart is maintained in a cart
composable and displays the cart size on a floating cart button.
This is a sample project created using:
- Source HTML page - https://library.pinegrow.com/tailwind/templates/yummypizza_tw/
- Starter Template - Vue Designer îles Tailwind CSS - Quick start template (see next section for its Readme)
Final Output Demo - https://pizzeria-iles.netlify.app/
This is a starter template that pre-includes the Pinegrow îles Module, Pinegrow Tailwind CSS Plugin and other goodies for Vue Designer.
Demo - https://pg-iles-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-iles-tailwindcss my-iles-tailwindcss-app #project-name
cd my-iles-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 # SPA during development
npm run build # MPA SSG (islands architecture)
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.
- î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]
- Tailwind CSS - The amazing utility-first CSS framework.
- @islands/mdx - file-based CMS powered by Markdown & Vue components. This module is shipped inside îles. Note: This page is a markdown file 🗒.
- @islands/prism - an îles module that injects a remark plugin to provide syntax highlighting for MDX documents.
- UnoCSS Preset Icons - use over 100,000 open-source Iconify icons. Uses the unocss format for icon names, for example,
i-mdi-home
.
- Pinegrow îles 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).
- @islands/pages - enables file-based routing, hooks to extend frontmatter and route data, supports a block in Vue single-file components for meta-data. This module is shipped inside îles.
- 📲 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.
- îles Devtools - Page information is available in the in-app debug panel (similar to Vitepress). Also access the "Islands" inspector in Vue 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.
- Vue Devtools - Official devtools that can be used as a standalone app alongside Vue Designer. It's conditionally configured in
app.ts
(only during development).- ACTION REQUIRED: Currently deactivated. In
app.ts
, uncomment the top devtools related snippet to activate.
- ACTION REQUIRED: Currently deactivated. In
- [VS Code Extensions](./.vscode/extensions.json & ./.vscode/settings.json)
- 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.
This project allows JS, and strict mode is turned off. Update tsconfig.ts
as required.
{
"compilerOptions": {
// ...
"strict": false,
"allowJs": true
}
}