This project is an opinionated approach to single page applications within the wonderful worlds of Vue.js, October CMS, and Laravel. To see what's included out of the box, check out the live demo.
Before getting started, make sure you have both NPM and vue-cli installed. Once that is taken care of, run the following command from your /themes directory.
$ vue init scottbedard/oc-vuetober-theme myawesometheme
$ cd myawesometheme
$ npm installTo build your site for production, run the following command.
$ npm run buildThe development server can be fired up at localhost:3000 by running the following.
$ npm run devFor a better development experience, make sure to install the Vue devtools Chrome extension.
Routes can be registered from the app/routes.js file. Simply import your component, and assign it to a route.
The layout components exist to provide an easy way of creating multiple site structures. To use a given layout for your page, make sure to register its route as a child route of the layout component.
When displaying dynamic content that may contain local links, it is recommended that you attach the v-linkable directive to the container. This will hijack click events and keep your user within the SPA. Without doing this, a full page reload will occur.
<div v-html="blogPost" v-linkable></div>This theme comes ready to go with unit testing and code coverage reporting. To run the test suite, execute the following command.
$ npm testMost continuous integration services like Travic CI and Circle CI should be able to infer the test command. Also, this theme works seamlessly with coverage reporting such as Coveralls.
This theme uses quite a few different tools. If you've never used some of these before, it is highly recommended that you familiarize yourself with them by giving their docs the once over.