{"id":26343592,"url":"https://github.com/Pinegrow/pg-nuxtui","last_synced_at":"2025-03-16T05:02:47.810Z","repository":{"id":188459142,"uuid":"678447950","full_name":"Pinegrow/pg-nuxtui","owner":"Pinegrow","description":"NuCommerce Store - Fullstack app with beautiful, accessible components from Nuxt UI library","archived":false,"fork":false,"pushed_at":"2025-01-15T22:12:01.000Z","size":3077,"stargazers_count":61,"open_issues_count":0,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-15T03:41:19.564Z","etag":null,"topics":["nuxt","nuxt-ui","nuxthq-ui","pinegrow","tailwindcss","vue","vue-designer"],"latest_commit_sha":null,"homepage":"https://pg-nuxtui.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pinegrow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-14T15:17:33.000Z","updated_at":"2025-03-14T08:18:53.000Z","dependencies_parsed_at":"2024-02-21T09:45:22.194Z","dependency_job_id":"606f1590-872f-4628-a66a-0e7e5f5f83f6","html_url":"https://github.com/Pinegrow/pg-nuxtui","commit_stats":null,"previous_names":["pinegrow/pg-nuxtui"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-nuxtui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-nuxtui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-nuxtui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-nuxtui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pinegrow","download_url":"https://codeload.github.com/Pinegrow/pg-nuxtui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826790,"owners_count":20354220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-ui","nuxthq-ui","pinegrow","tailwindcss","vue","vue-designer"],"created_at":"2025-03-16T05:02:13.106Z","updated_at":"2025-03-16T05:02:47.805Z","avatar_url":"https://github.com/Pinegrow.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Starter Kits"],"sub_categories":[],"readme":"# NuCommerce Store - Fullstack app with beautiful, accessible components from Nuxt UI library\n\nNuxt 3 Full stack (SPA-SSR) quick start template that pre-includes the [Pinegrow Nuxt Module](https://www.npmjs.com/package/@pinegrow/nuxt-module), [Pinegrow Tailwind CSS Plugin](https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin), [Nuxt UI](https://ui.nuxt.com/getting-started) 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).\n\nDemo - https://pg-nuxtui.netlify.app/\n\n## Vue Designer\n\nA desktop visual editor for Vue apps supporting Mac, Windows, and Linux by [Pinegrow](https://pinegrow.com/). Take it for a free trial at [Vue Designer](https://vuedesigner.com)!\n\nIt lets you visually design 🎨 your Vue single file components and boosts your productivity and creativity while building your component-based Vue apps.\n\nIt smartly integrates with your ⚡️ [Vite](https://vitejs.dev/) based CLI and provides an amazing developer experience with its powerful visual controls and features.\n\nClean code 😃, No lock-in - You are in control of your projects and development workflow ❤️\n\n## Try it now!\n\n### 1. Clone to local\n\n[Create a repo from this template on GitHub](https://github.com/pinegrow/pg-nuxtui/generate).\n\n(or)\n\nIf you prefer to do it manually with the cleaner git history\n\n```bash\nnpx giget@latest gh:pinegrow/pg-nuxtui my-nuxtui-app #project-name\ncd my-nuxtui-app\nnpm install #or use pnpm\n```\n\n(or)\n\nIf you prefer a minimal template (a single empty home page) instead,\n\n```bash\nnpx giget@latest gh:pinegrow/pg-nuxtui#minimal my-nuxtui-app #project-name\ncd my-nuxtui-app\nnpm install #or use pnpm\n```\n\n## 2. Open in Vue Designer\n\nOpen 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.\n\n## Usage\n\n### Start your development server\n\n```bash\nnpm run dev\n```\n\n### Build\n\n```bash\nnpm run build # SPA SSR,\nnpm run generate # SPA SSG (full-static)\n```\n\n### Analyze\n\n```bash\nnpm run analyze # bundle sizes\n```\n\n### Preview\n\n```bash\nnpm run now # build \u0026 preview\n```\n\n### Lighthouse\n\n```bash\nnpm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)\n```\n\n### Deploy to Netlify\n\nYou can deploy this repo as a site on your own to explore and experiment with, by clicking this button.\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Pinegrow/pg-nuxtui)\n\nCheck out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.\n\n## Pre-packed\n\n### Meta Framework (Vue-based)\n\n- [Nuxt](https://nuxt.com/) - The Intuitive Vue Framework\n  - 👉 Follow the Nuxt docs for the amazing list of [features](https://nuxt.com/docs/getting-started/introduction).\n  - 🚦 [Nuxt-Router](https://nuxt.com/docs/getting-started/routing), based on the official [Vue-Router](https://vuejs.org/guide/introduction.html) and enables file-based routing.\n  - SSR friendly `useState` composable to share state across components.\n\n### UI Frameworks\n\n- [Tailwind CSS](https://tailwindcss.com/docs/guides/nuxtjs#3) - The amazing utility-first CSS framework.\n\n- [Nuxt UI](https://ui.nuxt.com/getting-started) - Fully styled and customizable components for Nuxt. Under the hood:\n  - 🦾 **[HeadlessUI-Vue](https://headlessui.com/vue/menu)** - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.\n  - ⚡ **[VueUse](https://vueuse.org/)** - collection of essential Vue composition utilities.\n  - 🔌 **[Nuxt Tailwind CSS](https://tailwindcss.nuxtjs.org/)** - The Tailwind CSS module for Nuxt lets you set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬.\n  - 🌗 **[Nuxt Color Mode](https://color-mode.nuxtjs.org/)** - Dark and Light mode with auto detection made easy with Nuxt.\n  - 😃 **[Nuxt Icon](https://github.com/nuxt/icon)** - Use any icon (100,000+) from Iconify.\n\n### Nuxt UI configuration\n\n- 👉 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.\n- 👉 Nuxt UI by default uses `dark` mode. It's changed to `light` mode using `colorMode \u003e preference` in `nuxt.config.ts`.\n- 👉 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](https://ui.nuxt.com/getting-started/theming#colors).\n\n  ```ts\n  // nuxt.config.ts\n  export default defineNuxtConfig({\n    modules: [\n      '@pinegrow/nuxt-module',\n      '@nuxt/ui',\n      //...\n      function () {\n        addComponent({\n          name: 'UIcon',\n          filePath: '@/components/BaseIcon.vue',\n          priority: 100\n        })\n      },\n    ],\n    pinegrow: {\n      liveDesigner: {\n        iconPreferredCase: 'unocss', // default value (can be removed), Nuxt UI uses the unocss format for icon names\n        //...\n      },\n    },\n    ui: {\n      // safelistColors: [\n      //   'primary',\n      //   'secondary',\n      //   'tertiary',\n      //   'success',\n      //   'warning',\n      //   'error',\n      //   'info',\n      // ],\n    },\n  )}\n  ```\n\n### File-based CMS (markdown)\n\n- [Nuxt Content](https://github.com/nuxt/content) - file-based CMS powered by Markdown \u0026 Vue components. Note: This page is a markdown file 🗒.\n\n### Icons\n\n- [Nuxt Icon](https://github.com/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`.\n- [UnoCSS Preset Icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons/) - use over 100,000 open-source [Iconify](https://iconify.design/) icons. Uses the **unocss** format for icon names, for example, `i-mdi-home`.\n\n### Modules/Plugins\n\n- [Pinegrow Nuxt Module](https://www.npmjs.com/package/@pinegrow/nuxt-module) - enables you to live-design your Vue single-file components visually in Vue Designer.\n- [Pinegrow Tailwind CSS Plugin](https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin) - via Design Panel, enables visual controls customization (automatic) and theme customization (optional).\n- [VueUse](https://vueuse.org/) - collection of essential Vue composition utilities.\n- 🍍 [Pinia](https://pinia.vuejs.org/ssr/nuxt.html) stores for global state management via the `@pinia/nuxt module`. Its light-weight, type-safe, extensible, modular with vue-devtools support.\n- [Nuxt Tailwind CSS](https://tailwindcss.nuxtjs.org/) - The Tailwind CSS module for Nuxt lets you set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬.\n- [VeeValidate](https://vee-validate.logaretm.com/v4/integrations/nuxt/) takes care of value tracking, validation, errors, submissions and more.\n- [Nuxt Image](https://image.nuxt.com/) - Plug-and-play image optimization for Nuxt apps.\n- [Nuxt SEO](https://nuxtseo.com/) - 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-utils`, `nuxt-schema-org`.\n  - 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/\u003cpath\u003e/og.\u003cextension\u003e`\n\n### Devtools\n\n- [Nuxt Devtools](https://devtools.nuxtjs.org) - Enhance your DX (developer experience) with an amazing set of in-app features.\n- [Vue Devtools](https://devtools.vuejs.org/guide/installation.html#standalone) - Official devtools that can be used as a standalone app alongside Vue Designer. It's configured as a Nuxt plugin (only during development).\n  - **ACTION REQUIRED**: Currently deactivated. In `plugins/devtools.client.ts`, uncomment to activate.\n\n### VS Code Extensions\n\n- [VS Code Extensions](./.vscode/extensions.json \u0026 ./.vscode/settings.json)\n  - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 3 `\u003cscript setup\u003e` IDE support\n  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\n### Coding Style\n\n- Use Composition API with [`\u003cscript setup\u003e` SFC syntax](https://vuejs.org/guide/scaling-up/sfc.html)\n- [ESLint](https://eslint.org) with [@nuxt/eslint](https://eslint.nuxt.com/packages/module) Nuxt ESLint module that adopts ESLint 9 with a new flat config.\n- [Prettier](https://prettier.io) with [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) - format without conflicting with eslint rules.\n\n### Typescript\n\nThis project allows JS, and strict mode is turned off. Update `tsconfig.ts` as required.\n\n```json\n{\n  // https://nuxt.com/docs/guide/concepts/typescript\n  \"extends\": \"./.nuxt/tsconfig.json\",\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"strict\": false\n  }\n}\n```\n\n## Community\n\n- [Vue Designer Community](https://discord.gg/BYp45Nnu5T)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPinegrow%2Fpg-nuxtui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPinegrow%2Fpg-nuxtui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPinegrow%2Fpg-nuxtui/lists"}