# oc-vuetober-theme

This project is an opinionated approach to SPAs within the wonderful worlds of October CMS, Vue.js, and Webpack. To see what's included out of the box, check out the live demo.

Getting started

Before we begin, you'll need to have vue-cli installed. Once that's taken care of, execute the following from your /themes directory to create a new Vuetober project.

vue init scottbedard/oc-vuetober-theme my-theme
cd my-theme
npm install

The dev server can be fired up on localhost:3000 with the following command.

npm run dev

The test suite can be executed with the following command.

npm run test

Finally, to build your production assets execute the following command.

npm run build

Routing & linking from dynamic content

Routing and redirecting is pretty straight forward, just register your component or path in /src/app/routes.js. Managing router events and configuration can be done from /src/app/router.js. For more information on routing, check out the official documentation.

If you're displaying dynamic content that might contain internal links, the v-linkable directive should be used to hijack their click events and keep the user within the SPA.

<p v-linkable>
    {{{ blogPost }}}
</p>

Splitting dependencies

By default, Vue's dependencies and plugins will be split off into their own bundle. This allows us to modify the actual application without forcing users to re-download the dependencies. If your project is using other dependencies, it is recommended that you add them to the vendors bundle. To do this, simply add the dependency to entry.vendors in the base webpack config.