Repository files navigation

Nuxt 3 Full stack (SPA-SSR) quick start template that pre-includes thePinegrow Nuxt Module,Pinegrow Tailwind CSS Plugin,Nuxt UI and other goodies for Vue Designer. This template uses the tailwind-based Nuxt UI component library and features an eCommerce store, where data is fetched via APIs server by server routes (Nitro-powered).

Demo -https://pg-nuxtui.netlify.app/

A desktop visual editor for Vue apps supporting Mac, Windows, and Linux byPinegrow. Take it for a free trial atVue 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-nuxtui my-nuxtui-app#project-namecd my-nuxtui-appnpm install#or use pnpm

(or)

If you prefer a minimal template (a single empty home page) instead,

npx giget@latest gh:pinegrow/pg-nuxtui#minimal my-nuxtui-app#project-namecd my-nuxtui-appnpm 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

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

npm run 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 thedeployment documentation for more information.

• Nuxt - The Intuitive Vue Framework
  • 👉 Follow the Nuxt docs for the amazing list offeatures.
  • 🚦Nuxt-Router, based on the officialVue-Router and enables file-based routing.
  • SSR friendlyuseState composable to share state across components.

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

• Nuxt UI - Fully styled and customizable components for Nuxt. Under the hood:

  • 🦾HeadlessUI-Vue - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
  • ⚡VueUse - collection of essential Vue composition utilities.
  • 🔌Nuxt Tailwind CSS - The Tailwind CSS module for Nuxt lets you set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬.
  • 🌗Nuxt Color Mode - Dark and Light mode with auto detection made easy with Nuxt.
  • 😃Nuxt Icon - Use any icon (100,000+) from Iconify.

• 👉 Nuxt UI uses Heroicons by default and is configured exclusively for them. This template overrides (in the Nuxt config) Nuxt UI'sUIcon component with a local componentBaseIcon that uses UnoCSS Preset-Icons which allows us to use any icons from the iconify icon-sets and is very efficient in terms of automatic treeshaking.

• 👉 Nuxt UI by default usesdark mode. It's changed tolight mode usingcolorMode > preference innuxt.config.ts.

• 👉 There are some scenarios when colors might have to be added to thesafelistColors array under theui key. For more details, refer to the officialdocumentation.

  // nuxt.config.tsexportdefaultdefineNuxtConfig({modules:['@pinegrow/nuxt-module','@nuxt/ui',//...function(){addComponent({name:'UIcon',filePath:'@/components/BaseIcon.vue',priority:100})},],pinegrow:{liveDesigner:{iconPreferredCase:'unocss',// default value (can be removed), Nuxt UI uses the unocss format for icon names//...},},ui:{// safelistColors: [//   'primary',//   'secondary',//   'tertiary',//   'success',//   'warning',//   'error',//   'info',// ],},)}

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

• Nuxt Icon - We use only the default Heroicons. For all other icon sets, we utilize them via UnoCSS Preset Icons, using the UnoCSS format for icon names, e.g.,i-mdi-home.
• UnoCSS Preset Icons - use over 100,000 open-sourceIconify icons. Uses theunocss format for icon names, for example,i-mdi-home.

• 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).
• VueUse - collection of essential Vue composition utilities.
• 🍍Pinia stores for global state management via the@pinia/nuxt module. Its light-weight, type-safe, extensible, modular with vue-devtools support.
• Nuxt Tailwind CSS - The Tailwind CSS module for Nuxt lets you set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬.
• VeeValidate takes care of value tracking, validation, errors, submissions and more.
• Nuxt Image - Plug-and-play image optimization for Nuxt apps.
• Nuxt SEO - Amazing collection of hand-crafted Nuxt Modules for all SEO needs with a unified site config. Includesnuxt-site-config,nuxt-simple-robots,nuxt-simple-sitemap,nuxt-og-image,nuxt-link-checker,nuxt-seo-utils,nuxt-schema-org.
  • OG images and nuxtseo features can be previewed with nuxt-devtools during development. OG images can also be viewed using URL in this form -/__og-image__/image/<path>/og.<extension>

• 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).
  • ACTION REQUIRED: Currently deactivated. Inplugins/devtools.client.ts, uncomment to activate.

• [VS Code Extensions](./.vscode/extensions.json & ./.vscode/settings.json)
  • Volar - Vue 3<script setup> IDE support
  • ESLint
  • Prettier

• Use Composition API with<script setup> SFC syntax
• ESLint with@nuxt/eslint Nuxt ESLint module that adopts ESLint 9 with a new flat config.
• Prettier witheslint-config-prettier - format without conflicting with eslint rules.

This project allows JS, and strict mode is turned off. Updatetsconfig.ts as required.

{// https://nuxt.com/docs/guide/concepts/typescript"extends":"./.nuxt/tsconfig.json","compilerOptions": {"allowJs":true,"strict":false  }}

• Vue Designer Community