Laravel Boilerplate

This boilerplate is a good starter for a Laravel application using Vue, Inertia, TailwindCSS and TypeScript. It has authentification and password confirmation, and examples of dashboard and admin dashboard.

Installation

Clone the repository:

$ git clone https://github.com/hawezo:laravel-boilerplate
$ cd laravel-boilerplate

Install dependencies:

$ composer install

Install application:

$ php artisan app:install

You can also update with php artisan app:update.

Inertia

Inertia is installed and configured. inertia-vue and the Laravel adapter are installed. To render a page, use Inertia::view($component). You can find more information on the documentation.

TypeScript

TypeScript is installed and configured, but the Vue components do not use it. I intend to use TypeScript only on scripts or modules, like this theme rotate scripts. You can still use TypeScript on components by following the Vue documentation.

TailwindCSS

The following TailwindCSS plugins are included:

• Elevation — To provide better shadow utilities
• Theming — To provide powerful client-side theming (more info)
• Transitions — To provide transition support

PostCSS

The following PostCSS plugins are included:

• Calc — To allow the use of calc
• Custom Properties — To allow the use of custom CSS properties
• Import — To allow CSS importation
• Nested — To allow nesting of CSS rules
• Url — To rebase the url property

Lang

This boilerplate uses laravel-localization-loader and Lang.js together to import your localization into Vue. More specifically, this boilerplate automatically imports all localization files, unless you ignore them.

You can use the following helpers in your components:

$_: (key: string, replacements?: Replacements, locale?: string) => string,
$lang: () => Lang

An example is available in the Index page.

Router

This boilerplate uses Ziggy. The TypeScript entry point registers the router and adds it into Vue, so you can use $router() and $path() methods in any component.

$route: (name: string, params: any, absolute: boolean) => Router;
$path: (name: string, params: any, absolute: boolean) => string;

An example is available in the layout.

I decided not to include the routes in the Blade templates as they most likely don't change often, and instead export them into the scripts thanks to Ziggy's artisan command. So for the router to work, you need to extract the routes every time you change them with composer update:routes or php artisan ziggy:generate "resources/js/Script/router/router.js".

If you wish to use the @routes directive instead, you need to place it in your app.blade.php (just before </head> for instance), and to replace import { Router } from '@/Script/router' by import { WindowRouter } from '@/Script/router' in the entry file (app.ts).

You will still need a router.js file in the router directory, even if it's empty, because Webpack will cry if there is no such file.

Metadata

I added a helper that allows to easily set a page title from the view. You just have to set a title property to your component. It can be a string or a callback. The Vue instance is passed as the first parameter of the callback, so you can use an arrow function to contextually set the title of your page:

export default {
  title: ({ user }) => `Welcome, ${user.name}`,
  data() {
    return {
      user: {
        name: 'Jon Doe'
      }
    }
  }
}

If you are not familiar with destructuration, this is the equivalent of:

export default {
  title: (vm) => `Welcome, ${vm.user.name}`,
  data() {
    return {
      user: {
        name: 'Jon Doe'
      }
    }
  }
}

Error Handling

With Inertia, you have to replace the behavior of your default error handler in order display error pages. This boilerplate adds an error page and handles default errors with localization.

For a more advanced error handling, you can make an exception converter that would convert any \Exception into some App\Exceptions\AppException with a $code property, for example. You could map most common exceptions to a code, and let this code be sent in your views, so you can provide a documentation for your users.

// App\Exceptions\AppException

protected $map = [
    NotFoundHttpException::class => 0x03,
    \LogicException::class       => 0x02,
    \Exception::class            => 0x01,
];

Theming

I'm using my Tailwind theming plugin on every project now, so I fully configured it for this project.

The configuration is a really good start for every project. It's all in the theme.config.js file, and this file is included just like a plugin in tailwind.config.js.