{"id":23684865,"url":"https://github.com/pinegrow/pg-laravel-tailwindcss","last_synced_at":"2026-02-16T09:35:52.686Z","repository":{"id":209857826,"uuid":"725107950","full_name":"Pinegrow/pg-laravel-tailwindcss","owner":"Pinegrow","description":"Vue Designer Laravel Inertiajs Tailwind CSS - Quick start template","archived":false,"fork":false,"pushed_at":"2025-01-15T21:54:34.000Z","size":1959,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-02T12:43:15.308Z","etag":null,"topics":["jetstream-inertia","laravel","pinegrow","tailwindcss","vite","vue","vue-designer"],"latest_commit_sha":null,"homepage":"","language":"Vue","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":"2023-11-29T13:05:22.000Z","updated_at":"2025-01-15T21:54:36.000Z","dependencies_parsed_at":"2025-09-02T12:32:28.322Z","dependency_job_id":"c5ea10f4-b469-4166-9411-19a00da5e68c","html_url":"https://github.com/Pinegrow/pg-laravel-tailwindcss","commit_stats":null,"previous_names":["pinegrow/pg-laravel-tailwindcss"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/Pinegrow/pg-laravel-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-laravel-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-laravel-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-laravel-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-laravel-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pinegrow","download_url":"https://codeload.github.com/Pinegrow/pg-laravel-tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fpg-laravel-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29504819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: 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":["jetstream-inertia","laravel","pinegrow","tailwindcss","vite","vue","vue-designer"],"created_at":"2024-12-29T20:48:51.318Z","updated_at":"2026-02-16T09:35:52.668Z","avatar_url":"https://github.com/Pinegrow.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Designer Laravel Tailwind CSS - Quick start template\n\nYoutube video tutorial here - https://youtu.be/VusO1I5AqIc\n\nThis is a starter template that pre-includes the [Pinegrow Vite Plugin](https://www.npmjs.com/package/@pinegrow/vite-plugin), [Pinegrow Tailwind CSS Plugin](https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin) and other goodies for Vue Designer.\n\n\u003cdiv style=\"display: flex;\"\u003e\n  \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/985px-Laravel.svg.png\" alt=\"Laravel Logo\" style=\"width: 40px;\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/79047182/222930653-4c8079bc-30f0-43e1-9c63-b50a9ad68320.png\" alt=\"image\" style=\"width: 40px;\"\u003e\n  \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1184px-Vue.js_Logo_2.svg.png\" alt=\"Vue.js Logo\" style=\"width: 40px;\"\u003e\n \u003cimg src=\"https://ih1.redbubble.net/image.2428884987.0603/st,small,507x507-pad,600x600,f8f8f8.jpg\" alt=\"Redbubble Image\" style=\"width: 40px;\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n[Laravel Jetstream](https://jetstream.laravel.com/introduction.html) - This template is one of the Jetstream starter-kit that uses [TailwindCSS](https://tailwindcss.com/docs/guides/vite#vue) and [Inertiajs](https://inertiajs.com/).\n\n- Jetstream provides the implementation for your application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.\n- The application is designed to provide a smooth and interactive user experience.\n- This SPA offers an all-in-one solution for managing users and roles, featuring an easy-to-use dashboard for administrators.\n- Refer to the official documentation to learn about all the features.\n\nThis template has the PHP application server configured (instead of Vite which is used as a middleware) in Pinegrow Vite Plugin, to enable live-designing of Vue components of this laravel/inertia project. It also configures the custom folder setup \u0026 the default start-up page of the app.\n\n```js\nliveDesigner({\n    //... existing config parameters\n    devServerUrls: {\n        local: \"http://127.0.0.1:8000/\",\n    },\n    dirs: {\n      src: 'resources/js/',\n      layouts: 'resources/js/Layouts',\n      pages: 'resources/js/Pages',\n      components: 'resources/js/Components',\n    },\n    startupPage: '@/Pages/Welcome.vue',\n    //...\n}),\n```\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-laravel-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-laravel-tailwindcss my-laravel-tailwindcss-app #project-name\ncd my-laravel-tailwindcss-app\nnpm install #or use pnpm\n```\n\nThen, follow these steps\n\n```bash\ncomposer install | composer update | composer install --ignore-platform-req=ext-iconv #install/update composer\ncp .env.example .env # setup envn variables, update db password and other details as required\nphp artisan key:generate # generate an app key\nphp artisan migrate # configure the database\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 \u0026 application server\n\n```bash\nnpm run dev #in first terminal\nphp artisan serve #in second terminal\n```\n\n### Build\n\n```bash\nnpm run build\n```\n\n### Analyze\n\nUncomment the `rollup-plugin-visualizer` usage in your config file and execute the `build` command. This command will generate `stats.html`. Open `stats.html` in your browser to analyze bundle sizes.\n\n```bash\nnpm run build # open stats.html to analyze bundle sizes\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## Pre-packed\n\n### Framework\n\n- [Laravel](https://laravel.com/) - Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:\n\n  - [Simple, fast routing engine](https://laravel.com/docs/routing).\n  - [Powerful dependency injection container](https://laravel.com/docs/container).\n  - Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.\n  - Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).\n  - Database agnostic [schema migrations](https://laravel.com/docs/migrations).\n  - [Robust background job processing](https://laravel.com/docs/queues).\n  - [Real-time event broadcasting](https://laravel.com/docs/broadcasting).\n  - Learn Laravel from the [official documentation](https://laravel.com/docs), [Laravel Bootcamp](https://bootcamp.laravel.com), [Laracasts](https://laracasts.com)\n\n- [Laravel Jetstream](https://jetstream.laravel.com/introduction.html) - This template is one of the Jetstream starter-kit that uses [TailwindCSS](https://tailwindcss.com/docs/guides/vite#vue) and [Inertiajs](https://inertiajs.com/).\n  - Jetstream provides the implementation for your application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.\n  - Refer to the official documentation to learn about all the features.\n\n### Meta Framework (Vue-based)\n\n- [Vite](https://vitejs.dev/) - Vite-powered Vue SPA\n  - 👉 Follow the amazing Vue [docs](https://vuejs.org/guide/introduction.html)\n\n### UI Frameworks\n\n- [Tailwind CSS](https://tailwindcss.com/docs/guides/vite#vue) - The amazing utility-first CSS framework.\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 Vite Plugin](https://www.npmjs.com/package/@pinegrow/vite-plugin) - 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- 📲 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - On-demand components auto importing for Vue.\n- 📲 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - Auto import APIs on-demand for Vite, Webpack and Rollup.\n- [VueUse](https://vueuse.org/) - collection of essential Vue composition utilities.\n- 🍍 [Pinia](https://pinia.vuejs.org/) stores for global state management. Its light-weight, type-safe, extensible, modular with vue-devtools support.\n- [VeeValidate](https://vee-validate.logaretm.com/v4/) takes care of value tracking, validation, errors, submissions and more.\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 conditionally configured in `resources/js/app.js` (only during development).\n  - **ACTION REQUIRED**: Currently deactivated. In `resources/js/app.js`, uncomment the top devtools related snippet to activate.\n\n### VS Code Extensions\n\n- [VS Code Extensions](./.vscode/extensions.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  \"compilerOptions\": {\n    // ...\n    \"strict\": false,\n    \"allowJs\": true\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-laravel-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpinegrow%2Fpg-laravel-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinegrow%2Fpg-laravel-tailwindcss/lists"}