Skip to content

Pinegrow/pizzeria-vitepress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

26 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Pizzeria with Vitepress

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 SPA-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 Pinia store and displays the cart size on a floating cart button.

This is a sample project created using:

Final Output Demo - https://pizzeria-vitepress.netlify.app/

Vue Designer Vitepress Tailwind CSS - Quick start template

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

This Awesome Static Site (which is also a single-page application) is powered by Vitepress and Tailwind CSS. This template demonstrates how a custom theme can be applied to an existing Vitepress site and easily designed in Vue Designer. It slightly diverges from the standard Vitepress project setup by moving the Vitepress config, app entry, and custom theme outside the '.vitepress' folder. The config resides in the project root as 'Vitepress.config.ts', and the app and its custom theme reside in the familiar 'src' folder.

Demo - https://pg-vitepress-tailwindcss-custom.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-vitepress-tailwindcss-custom my-vitepress-tailwindcss-custom-app #project-name
cd my-vitepress-tailwindcss-custom-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 (Vue-based)

  • Vite - Vite-powered Vue Static Site (SPA)
    • πŸ‘‰ Follow the amazing Vitepress docs
    • 🚦 Vue-Router for client-side routing. Expressive, configurable, convenient enables snappy navigation.

UI Frameworks

File-based CMS (markdown)

  • Markdown Extensions - file-based CMS powered by Markdown & Vue components. This module is shipped inside Vitepress. Note: This page is a markdown file πŸ—’.

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

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