{"id":23684853,"url":"https://github.com/pinegrow/pg-quasar-tailwindcss","last_synced_at":"2026-02-16T01:03:04.758Z","repository":{"id":222634772,"uuid":"757296990","full_name":"Pinegrow/pg-quasar-tailwindcss","owner":"Pinegrow","description":"QuCommerce Store - Quasar powered cross-platform store with powerful, accessible components, styled with Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-01-16T01:39:38.000Z","size":3016,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-02T12:43:15.250Z","etag":null,"topics":["pinegrow","quasar","quasarframework","tailwindcss","vue","vue-designer"],"latest_commit_sha":null,"homepage":"https://pg-quasar-tailwindcss.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-02-14T07:48:45.000Z","updated_at":"2025-04-06T17:54:45.000Z","dependencies_parsed_at":"2024-02-20T01:51:57.348Z","dependency_job_id":"efa16cc3-69c9-44b3-8029-802d1678705a","html_url":"https://github.com/Pinegrow/pg-quasar-tailwindcss","commit_stats":null,"previous_names":["pinegrow/pg-quasar-tailwindcss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Pinegrow/pg-quasar-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-quasar-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-quasar-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-quasar-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-quasar-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pinegrow","download_url":"https://codeload.github.com/Pinegrow/pg-quasar-tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-quasar-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29496942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T00:16:34.147Z","status":"ssl_error","status_checked_at":"2026-02-16T00:15:26.759Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["pinegrow","quasar","quasarframework","tailwindcss","vue","vue-designer"],"created_at":"2024-12-29T20:48:48.312Z","updated_at":"2026-02-16T01:03:04.655Z","avatar_url":"https://github.com/Pinegrow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QuCommerce Store - Quasar powered cross-platform store with powerful, accessible components, styled with Tailwind CSS\n\nQuasar quick start template that pre-includes the [Pinegrow Quasar Module](https://www.npmjs.com/package/@pinegrow/quasar-module), [Pinegrow Tailwind CSS Plugin](https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin) and other goodies for Vue Designer.\n\nDemo - https://pg-quasar-tailwindcss-css.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-quasar-tailwindcss/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-quasar-tailwindcss my-quasar-tailwindcss-app #project-name\ncd my-quasar-tailwindcss-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-quasar-tailwindcss#minimal my-quasar-tailwindcss-app #project-name\ncd my-quasar-tailwindcss-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- **ACTION REQUIRED**: Currently, only SPA \u0026 SSR mode are active in this template. To use other modes (desktop, mobile etc), enable them by following the official Quasar documentation.\n\n### Start your development server\n\nFor Windows build when running Mac - run Windows in a virtual machine and run development process there\nFor iOS (Mac only) - install Xcode before starting development server\nFor Android - install Android Studio, Android File Transfer, setup and launch Android Virtual Device, and then start the development server\n\n```bash\nnpm run dev # Web - SPA\nnpm run dev:ssr # Web - SSR SPA\nnpm run dev:electron # Desktop\nnpm run dev:ios # Mobile - ios\nnpm run dev:android # Mobile - android\n```\n\n### Build\n\nFor Windows build when running Mac - uncomment the `platform: 'win32'` line in `quasar.config.ts` and run `npm run build:electron`\n\n```bash\nnpm run build # Web - SPA\nnpm run build:ssr # Web - SSR SPA\nnpm run build:electron # Desktop\nnpm run build:ios # Mobile - ios\nnpm run build:android # Mobile - android\n```\n\n### Icons\n\n```bash\nnpm run icons # regenerate icons \u0026 splash screens\n```\n\n### Analyze\n\nSet `build \u003e analyze` to `true` in your config file and run the necessary `build` command. This will generate and open an HTML report containing bundle size information.\n\n```bash\nnpm run build # use the necessary build command from above build section\n```\n\n### Preview\n\n```bash\nnpm run build # build\nquasar serve --history #preview build\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-quasar-tailwindcss)\n\nCheck out the [deployment documentation](https://quasar.dev/quasar-cli-webpack/developing-ssr/deploying/) for more information.\n\n## Pre-packed\n\n### Meta Framework (Vue-based)\n\n- [Quasar](https://quasar.dev/introduction-to-quasar) - The enterprise-ready cross-platform VueJs framework\n  - 👉 Follow the Quasar docs for the amazing list of [features](https://quasar.dev/introduction-to-quasar).\n  - 🚦 [Vue-Router](https://vuejs.org/guide/introduction.html) for client-side routing. Expressive, configurable, convenient enables snappy navigation.\n\n### UI Frameworks\n\n- [Quasar](https://quasar.dev/components/) - There’s a component for almost every web development need within Quasar. Each of Quasar’s components is carefully crafted to offer you the best possible experience for your users. Quasar is designed with performance \u0026 responsiveness in mind – so the overhead of using Quasar is barely noticeable. This attention to performance and good design is something that gives us special pride.\n\n- [Tailwind CSS](https://tailwindcss.com/docs/guides/nuxtjs#3) - The amazing utility-first CSS framework.\n  👉 Note: This template uses Tailwind CSS for styling. In order to resolve Quasar's !important in default theme, tailwind.config.ts includes the `important: true` setting.\n  👉 Note: Quasar's extended spacing utilities that can enabled by setting `framework.cssAddon: true` in quasar config is ensured to be not enabled to reduce the css footprint added by quasar.\n\n### Icons\n\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 Quasar Module](https://www.npmjs.com/package/@pinegrow/quasar-module) - enables you to live-design your Vue single-file components visually in Vue Designer. Also, via Design Panel, enables theme customization (optional) and visual controls for Quasar utilities. Note: This is an addon that's licensed separately to Pinegrow apps (like 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://quasar.dev/quasar-cli-vite/state-management-with-pinia) stores for global state management. Its light-weight, type-safe, extensible, modular with vue-devtools support.\n- [VeeValidate](https://vee-validate.logaretm.com/v3/guide/3rd-party-libraries.html#quasar) takes care of value tracking, validation, errors, submissions and more.\n- [QImg](https://quasar.dev/vue-components/img#introduction/) - The QImg component makes working with images (any picture format) easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio).\n- [Quasar SEO](https://quasar.dev/options/seo/) - The Quasar Meta plugin can dynamically change page title, manage `\u003cmeta\u003e` tags, manage `\u003chtml\u003e` and `\u003cbody\u003e` DOM element attributes, add/remove/change `\u003cstyle\u003e` and `\u003cscript\u003e` tags in the head of your document (useful for CDN stylesheets or for json-ld markup, for example), or manage `\u003cnoscript\u003e` tags.\n\n### Devtools\n\n- [Vite Devtools](https://devtools-next.vuejs.org/guide/vite-plugin) - 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.\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 boot file (only during development).\n  - **ACTION REQUIRED**: Currently deactivated. In `src/boot/devtools.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 [eslint-plugin-vue](https://vuejs.org/guide/scaling-up/tooling.html#linting) - official set of linting rules.\n- [Prettier](https://prettier.io) with [@vue/eslint-config-prettier](https://vuejs.org/guide/scaling-up/tooling.html#formatting) - 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://quasar.dev/quasar-cli-vite/supporting-ts\n  \"extends\": \"@quasar/app-vite/tsconfig-preset\",\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-quasar-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpinegrow%2Fpg-quasar-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinegrow%2Fpg-quasar-tailwindcss/lists"}