This Vue plugin was inspired by defunkt/jquery-pjax and depends on spatie/laravel-pjax.
Those people who use VueJS extensively in their (non-SPA) projects, PJAX could be lifesaving when optimising the user experience. Simply put, PJAX uses AJAX requests to manipulate the DOM at time of page changes thus reducing the load over the network and therefore improving response times.
The plugin itself depends on the vue
and axios
libraries and has been built to consume the PJAX server responses provided by the spatie/laravel-pjax
package.
First things first, open up your terminal and pull in the plugin.
$ npm i @syntaxltd/vue-pjax
Next, you will have to specify the target container in your blade template. In the example below we called it #pjax-container
(which is the default by the way).
<div id="app">
@include('partials.header')
<div>
@include('partials.navigation')
<main id="pjax-container">
@yield('content')
</main>
</div>
</div>
Now go to your app.js
file where you set up Vue and initialise the plugin.
require('./bootstrap');
window.Vue = require('vue');
import { PjaxEventBus, pjaxAdapter } from '@syntaxltd/vue-pjax';
window.Vue.use(pjaxAdapter);
// or if you don't like the default target, you can override it
// window.Vue.use(pjaxAdapter, {
// targetSelector: '#my-custom-target',
// });
const app = new Vue({
el: '#app'
});
As the final step, you will have to install Spatie's PHP library to play ball on the server side.
Once done, head to your browser and see the magic happen!
You can override the default target container if you need to at time of initialisation.
window.Vue.use(pjaxAdapter, {
targetSelector: '#my-custom-target',
});
Should you have any links you want to disable the PJAX behaviour for, you can do so in two ways: by adding the data-no-pjax
attribute or by adding the no-pjax
class.
<a href="/my-non-pjax-link-1" data-no-pjax>External Link 1</a>
<a href="/my-non-pjax-link-2" class="no-pjax">External Link 2</a>
If you have many of those under a common parent, you can do so by disabling the PJAX behaviour on the parent itself using either of the methods above.
<div data-no-pjax>
<div>
<h1>Some external links</h1>
<ul>
<li><a href="/my-non-pjax-link-1">External Link 1</a></li>
<li><a href="/my-non-pjax-link-2">External Link 2</a></li>
<li><a href="/my-non-pjax-link-3">External Link 3</a></li>
</ul>
</div>
<div>
<h1>Even more external links</h1>
<ul>
<li><a href="/my-non-pjax-link-4">External Link 4</a></li>
<li><a href="/my-non-pjax-link-5">External Link 5</a></li>
<li><a href="/my-non-pjax-link-6">External Link 6</a></li>
</ul>
</div>
</div>
The plugin attaches an event listener to all the a[href]
tags on your page at time of initialisation. When you click the link and you haven't disabled the PJAX behaviour, it takes over by preventing the default action and works with Spatie's PHP library to bring only the relevant content from the backend. Otherwise, it will let the default click event fall through and go on its merry way.
Configuration:
- fresh install of Laravel with VueJS and Axios (nothing else);
- a three link navigation:
ul > li > a
, nothing more complex; - three pages with only an
h1
tag on each; - all run by Laravel Valet on localhost.
Test results without using the plugin:
Please report bugs using the issue tracker.
You are more than welcome to help me maintain and extend this plugin.
Riverskies Development Limited is a small software development company based in Surrey, UK.