Laravel Tailwind Boilerplate and Vue ready

Laravel Tailwind Boilerplate and Vue ready

Written by Marc Garcia on Aug 20th, 2021 ・ Views ・ Report Post

Marc Garcia Visit User Profile
Table of contents

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

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

"Buy Me A Coffee"

Features

  • Laravel 8.*
  • Tailwind 2.1 Ready and Loaded
    • @tailwindcss/typography
    • @tailwindcss/forms
    • Dark mode ready
    • All variants enabled by default
  • Vue 2, Vuex, Vue-Router, Vue-Axios - Ready
  • Scss / Sass ready

Usage

🌟 Give a repo Star :)

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

npm install # install npm dependencies

npm run dev # compile assets

composer install # install php dependencies

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

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

Libs Used

License

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

Comments (0)