Skip to content
/ pg-nuxtui Public template

NuCommerce Store - Fullstack app with beautiful, accessible components from Nuxt UI library

License

Notifications You must be signed in to change notification settings

Pinegrow/pg-nuxtui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

NuCommerce Store - Fullstack app with beautiful, accessible components from Nuxt UI library

Nuxt 3 Full stack (SPA-SSR) quick start template that pre-includes the Pinegrow 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/

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-nuxtui my-nuxtui-app #project-name
cd my-nuxtui-app
npm 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-name
cd my-nuxtui-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 # SPA SSR,
npm run generate # SPA SSG (full-static)

Analyze

npm run 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)

  • Nuxt - The Intuitive Vue Framework
    • πŸ‘‰ Follow the Nuxt docs for the amazing list of features.
    • 🚦 Nuxt-Router, based on the official Vue-Router and enables file-based routing.
    • SSR friendly useState composable to share state across components.

UI Frameworks

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

  • πŸ‘‰ Nuxt UI uses Heroicons by default and is configured exclusively for them. This template overrides (in the Nuxt config) Nuxt UI's UIcon component with a local component BaseIcon 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 uses dark mode. It's changed to light mode using colorMode > preference in nuxt.config.ts.

  • πŸ‘‰ There are some scenarios when colors might have to be added to the safelistColors array under the ui key. For more details, refer to the official documentation.

    // nuxt.config.ts
    export default defineNuxtConfig({
      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',
        // ],
      },
    )}

File-based CMS (markdown)

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

Icons

  • 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-source Iconify icons. Uses the unocss format for icon names, for example, i-mdi-home.

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).
  • 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. Includes nuxt-site-config, nuxt-simple-robots, nuxt-simple-sitemap, nuxt-og-image, nuxt-link-checker, nuxt-seo-experiments, 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>

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

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

Community