Skip to content

Latest commit

 

History

History
186 lines (130 loc) · 9.26 KB

README.md

File metadata and controls

186 lines (130 loc) · 9.26 KB
Raw

Vue Designer Laravel Tailwind CSS - Quick start template

Youtube video tutorial here - https://youtu.be/VusO1I5AqIc

This is a starter template that pre-includes the Pinegrow Vite Plugin, Pinegrow Tailwind CSS Plugin and other goodies for Vue Designer.

Laravel Logo image Vue.js Logo Redbubble Image

Laravel Jetstream - This template is one of the Jetstream starter-kit that uses TailwindCSS and Inertiajs.

  • 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.
  • The application is designed to provide a smooth and interactive user experience.
  • This SPA offers an all-in-one solution for managing users and roles, featuring an easy-to-use dashboard for administrators.
  • Refer to the official documentation to learn about all the features.

This 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 & the default start-up page of the app.

liveDesigner({
    //... existing config parameters
    devServerUrls: {
        local: "http://127.0.0.1:8000/",
    },
    dirs: {
      src: 'resources/js/',
      layouts: 'resources/js/Layouts',
      pages: 'resources/js/Pages',
      components: 'resources/js/Components',
    },
    startupPage: '@/Pages/Welcome.vue',
    //...
}),

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-laravel-tailwindcss my-laravel-tailwindcss-app #project-name
cd my-laravel-tailwindcss-app
npm install #or use pnpm

Then, follow these steps

composer install | composer update | composer install --ignore-platform-req=ext-iconv #install/update composer
cp .env.example .env # setup envn variables, update db password and other details as required
php artisan key:generate # generate an app key
php artisan migrate # configure the database

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 & application server

npm run dev #in first terminal
php artisan serve #in second terminal

Build

npm run build

Analyze

Uncomment 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.

npm run build # open stats.html to analyze bundle sizes

Lighthouse

npm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)

Pre-packed

Framework

Meta Framework (Vue-based)

  • Vite - Vite-powered Vue SPA
    • 👉 Follow the amazing Vue docs

UI Frameworks

Icons

  • 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 Vite Plugin - 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).
  • 📲 unplugin-vue-components - On-demand components auto importing for Vue.
  • 📲 unplugin-auto-import - Auto import APIs on-demand for Vite, Webpack and Rollup.
  • VueUse - collection of essential Vue composition utilities.
  • 🍍 Pinia stores for global state management. Its light-weight, type-safe, extensible, modular with vue-devtools support.
  • VeeValidate takes care of value tracking, validation, errors, submissions and more.

Devtools

  • Vite Devtools - 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.
  • Vue Devtools - 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).
    • ACTION REQUIRED: Currently deactivated. In resources/js/app.js, uncomment the top devtools related snippet to activate.

VS Code Extensions

Coding Style

Typescript

This project allows JS, and strict mode is turned off. Update tsconfig.ts as required.

{
  "compilerOptions": {
    // ...
    "strict": false,
    "allowJs": true
  }
}

Community