DEV Community

Marc Garcia Torrent
Marc Garcia Torrent

Posted on • Originally published at devdojo.com

Laravel Tailwind Boilerplate and Vue ready

Happy Friday!!

This week I was working with a simple GitHub repo to save me time when I start new Laravel projects.

The repo it's called Laravel Tailwind Boilerplate & Vue ready

It consist in a Initial template to start your Laravel projects from scratch.

It's very simple! There are not any extra functionality, no auth, no APIs, anything!
Just a initial template to save time installing initial packages and configurint tailwind, Scss and Vue assets.

Let me show the GitHub and how it works! Thank you and have a great weekend!

https://github.com/magarrent/laravel-tailwind-boilerplate-vue-ready


Laravel Tailwind Boilerplate - Vue Ready

Software License

Features

  • Laravel 8.*
  • Tailwind 2.1 Ready and Loaded
  • Vue 2, Vuex, Vue-Router, Vue-Axios - Ready
  • Scss / Sass ready

Usage

🌟 Give a repo Star :)
Enter fullscreen mode Exit fullscreen mode

Just download the latest ZIP release of the repository and init the laravel project

npm install # install npm dependencies

npm run dev # compile assets
Enter fullscreen mode Exit fullscreen mode
composer install # install php dependencies
Enter fullscreen mode Exit fullscreen mode

Assets

resources/
┣ css/
┃ β”— tailwind.css # Import tailwind classes
┣ js/
┃ ┣ components/
┃ ┃ β”— App.vue # Default App.vue for initial Vue config
┃ ┣ app.js # Vue init & configuration
┣ scss/
┃ β”— custom.scss #Β Custom scss file for your peoject
Enter fullscreen mode Exit fullscreen mode

Webpack Mix configuration

mix
    .js('resources/js/app.js', 'public/js').vue({ version: 2 }) // Vue template
    .postCss('resources/css/tailwind.css', 'public/css', [ // Tailwind css loaded
        require("tailwindcss"),
    ])
    .sass('resources/scss/custom.scss', 'public/css'); // Custom Scss file


Enter fullscreen mode Exit fullscreen mode

Libs Used

License

The Laravel framework is open-sourced software licensed under the MIT license.

Top comments (0)