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.jsfile.
-
Clone the repo
git clone git@github.com:ssomenzi/fast.git -
cd in the fast directory
cd fast -
Run
composer install. -
Create your
.envfile duplicating the.env.examplefilecp .env.example .env. -
Set your db credentials in the
.envfile. -
Run
php artisan key:generate -
Run
php artisan migrate. -
Run
npm install -
Run
npm run watchand 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.