laravel-boilerplate
laravel-boilerplate copied to clipboard
A Laravel boilerplate with Inertia.js, Vue.js, TypeScript, Tailwind CSS, and client-side theming
This boilerplate is abandoned. For getting-started resources related to Inertia, please take a look at the Awesome repository.
Boilerplate
This boilerplate uses Laravel 7, Vue (with the composition plugin), TypeScript, Inertia.js and the domain-oriented hierarchy structure from Brent's Laravel Beyond CRUD.
$ composer create-project innocenzi/laravel-boilerplate your-app
Inertia.js
Inertia.js is installed and configured. You can learn more about the Vue Adapter and the Laravel Adapter.
Every Inertia page is stored in /resources/js/views. You can access Inertia's $page
from Vue's context
(which is the second argument of the setup
function of the composition API).
export default defineComponent({
setup(props, { root }) {
// @ts-ignore
console.log(root.$page.app); // prints the `app` shared data
},
});
I didn't manage to augment Vue with the composition API yet, any contribution regarding this is welcome. In the meantime, you need to use @ts-ignore
for TypeScript to not yell at you.
To share data to every page in your front-end, you can use the Inertia facade. This boilerplate uses an InertiaServiceProvider
to share basic data. You can find more information about this on the shared data documentation.
To display an Inertia page, you can also use the Inertia facade, or the inertia
helper. A basic example is shown in the route file.
Tailwind CSS
Tailwind CSS 1.2 is included and loaded as a PostCSS plugin.
Additionnaly, @tailwindcss/ui
is installed, as well as tailwindcss-theming
.
The former upgrades the configuration to better match the Tailwind UI aesthetics, and the second is there to provide theming capacities to your application.
Theming, dark and light themes
Tailwind Theming is disabled by default to avoid confusion with the default color palette. To enable it:
- Uncomment the corresponding plugin in
tailwind.config.js
- Update the color palette in
theme.config.js
(more information here) - Use the correct colors in your views
- Eventually, change your theme dynamically (example in your body)
Read the documentation) for more information.
PostCSS
PostCSS is a tool that transforms your CSS thanks to JavaScript plugins. This boilerplate includes a few plugins:
-
postcss-import
— To allow importation in your CSS files, just like SASS, -
tailwindcss
— To include Tailwind CSS, -
postcss-nested
— To allow rule nesting, just like SASS, -
postcss-font-magician
— To generate@font-face
rules from your used font families so you never have to do it yourself, -
autoprefixer
— To add vendor prefixes.
The order of the plugin is important, since they are processed in the order they are registered.
Localization
laravel-localization-loader
and Lang.js
by rmariuzzo are used together to import your language files into Vue. More specifically, laravel-vue-lang
is used, which is a wrapper around these two libraries as well as a Mix extension, is used, so you don't have anything to do.
Just use the $_
method in Vue (or its alias $t
) to translate something.
$_: (key: string, replacements?: Replacements, locale?: string) => string;
More information on the documentation.
Routing
Currently, no example is provided within this boilerplate, but I personally make use of the sharing ability of Inertia to get links. For more information on how to handle links on an Inertia application, you can read this excellent blog post from Sebastian De Deyne.