By cloning this repo and running npm install you get a fast folder containing a new Laravel 5.7 app with vue.js, auth and tailwind presets and turbolinks.
โ ๏ธ If you clone this repo in a folder with a different name you need to fix the browserSync proxy defined in thewebpack.mix.js
file.
-
Clone the repo
git clone [email protected]:ssomenzi/fast.git
-
cd in the fast directory
cd fast
-
Run
composer install
. -
Create your
.env
file duplicating the.env.example
filecp .env.example .env
. -
Set your db credentials in the
.env
file. -
Run
php artisan key:generate
-
Run
php artisan migrate
. -
Run
npm install
-
Run
npm run watch
and you're ready to go... and to go pretty fast.
Gives you a Laravel 5.7 app with auth.
Installs the laravel-frontend-presets/tailwindcss
npm package
Installs the turbolinks
npm package and adds
import Turbolinks from 'turbolinks'
Turbolinks.start()
to your resources/js/app.js
file.
Installs the vue-turbolinks
npm package and adds
import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)
to your resources/js/app.js
file.
In your resources/js/app.js
file, wraps your vue.js instance creation in a listener to fix lifecycle conflicts between vue and turbolinks
document.addEventListener('turbolinks:load', () => {
let app = new Vue({
el: '#app'
})
})
In your webpack.mix.js
file, adds an option to the browserSync configuration object to insert the turbolinks js snippet in the <head>
section of your page so it is not added on each page load
snippetOptions: {
rule: {
match: /<\/head>/i,
fn: function (snippet, match) {
return snippet + match;
}
}
}
Changes the home view and adds an about view with some tailwind magic with their links in the navigation bar and the related routes in the routes/web.php
file, just to show that turbolinks is working fine.