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

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

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

• Laravel
• TailwindCss
• Vue.js
• Vuex
• Vue-Router
• Vue-Axios
• Vue-Router
• Scss/Sass

License

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