Product support

Get help in the plugin support forum.



Adds Single Page Application features to the OctoberCMS website.


This plugin requires jQuery to be included in your layout/page.

Plugin usage:

  • Add [makeSpa] component to your layout file to enable plugin features.

  • Place content in a container with id #spa-page-content, for example:

    <div id="spa-page-content">
        {% page %}
  • Add .spa-link class to any link you need to handle with OctoberSPA plugin for example:

    <a href="{{ 'home'|page }}" class="spa-link">Home</a>

    Note - plugin doesn't handle "anchors" and blank links such as:

    <a href="#">Just a link</a>
    <a href="#services">Services</a>
  • You can also add .spa-link class to any block so that OctoberSPA handles all the links it contains!


    <nav class="spa-link">
        <a href="{{ 'home'|page }}">Home</a>
        <a href="{{ 'contact_us'|page }}">Contact Us</a>
        <a href="{{ 'about'|page }}">About</a>
        <a href="{{ 'whatever'|page }}">Etc...</a>

    or even:

    <body class="spa-link">
        <!-- Your layout  -->
  • Found the plugin useful on 4 Mar, 2020

    Hi, I like the plugin.

    I did have to make a minor fix for it to work with my site:

    change lines 520 of spa.js from a loop to locate "spa-page-content" to a jquery find like below:

    let reloadElem = dom.find("#spa-page-content");

    Otherwise, your plugin will only find spa-page-content if its a root-level node of document


Fixed anchor links handling.

Apr 03, 2019


Initialize plugin.

Apr 02, 2019