This project is an opinionated approach to single page applications within the awesome worlds of Vue.js, October CMS, and Laravel. To see what's included out of the box, check out the live demo.
Note: The next version of Vuetober will be a vue-cli plugin. Click here to help us test drive it.
In order to use this theme, you'll need to have a fair understanding of Vue.js. If you've never used this framework before, you can get the fundamentals down through this free screencast series.
To install a Vuetober theme, run the following commands from your /themes
directory.
# clone down the repository and cd into it
$ git clone https://github.com/scottbedard/oc-vuetober-theme.git mytheme
$ cd mytheme
# install dependencies
$ yarn
# run setup command
$ yarn run setup
# compile production assets
$ yarn run build
# start development server
$ yarn run dev
# run unit tests
$ yarn test
Note: This theme uses Yarn to manage it's dependencies. If you're unfamiliar with Yarn, this screencast is a great place to start.
Episode 1: Introduction to Vuetober
Episode 2: Using the development server
Episode 3: Registering global components
Episode 4: Communicating with the backend
Single file components
Vue is a fantastic framework, and when using .vue
files we have a great foundation for creating small, composable components. With this setup, we're able to write our code using any pre-processors we like, and take advantage of things like hot reloading and scoped css.
State of the art tooling
This theme takes full advantage of Webpack 3. The build script will optimize your application with techniques like automatically inlining small images, tree shaking, and more. In addition to this, ESLint will automatically fix your javascript to ensure a consistent style throughout your codebase.
Modern Javascript
You're free to use the latest and greatest Javascript and JSX. Your code will be compiled by Babel into something that every browser can understand.
Unit testing
Every aspect of this theme is unit testable, with great tooling set up to help you deliver rock solid code. This includes the ability to easily render components in tests, mock dependencies, and even spy on functions. In addition to this, code coverage reporting is already configured, which means it's trivially easy to integrate with a service like CodeCov.