Nuxt 3 Full stack (SPA-SSR) quick start template that pre-includes the Pinegrow Nuxt Module, Pinegrow Tailwind CSS Plugin, Nuxt UI, Shadcn-Vue blocks 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-shadcn-vue.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-nuxtui-shadcn-vue my-nuxtui-shadcn-vue-app #project-name
cd my-nuxtui-shadcn-vue-app
npm install #or use pnpm
(or)
If you prefer a blank template (a single empty home page) instead,
npx giget@latest gh:pinegrow/pg-nuxtui-shadcn-vue#blank my-nuxtui-shadcn-vue-app #project-name
cd my-nuxtui-shadcn-vue-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
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 the deployment documentation for more information.
- 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.
-
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 Module - This module helps you set up Tailwind CSS in your Nuxt application in seconds.
- ๐ Nuxt Color Mode - Dark and Light mode with auto detection made easy with Nuxt.
- ๐ TailwindCSS Icons - Use any icon (100,000+) from Iconify, for TailwindCSS.
-
๐ Nuxt UI uses heroicons by default and is configured only to use them. In order to use all iconsets in Vue Designer's icon-picker, the
ui
key of the Nuxt config has been updated (icons: 'all'
). -
๐ Nuxt UI by default uses
dark
mode. It's changed tolight
mode usingcolorMode > preference
innuxt.config.ts
. -
๐ There are some scenarios when colors might have to be added to the
safelistColors
array under theui
key. For more details, refer to the official documentation.// nuxt.config.ts export default defineNuxtConfig({ modules: [ '@pinegrow/nuxt-module', '@nuxt/ui', //... ], pinegrow: { liveDesigner: { iconPreferredCase: 'unocss', // default value (can be removed), Nuxt UI uses the unocss format for icon names //... }, }, ui: { icons: 'all', // 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 ๐.
- TailwindCSS Icons - use over 100,000 open-source Iconify icons. This is already part of Nuxt UI, so you just use UIcon component and icon props/slots of other components like UButton etc. Uses the unocss 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. - 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
.
- Nuxt Devtools - Enhance your DX (developer experience) with an amazing set of in-app features.
- ACTION REQUIRED: Currently deactivated. In
nuxt.config.ts
, uncomment module to activate.
- ACTION REQUIRED: Currently deactivated. In
- 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.
- 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.
- 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.
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"strict": false
}
}