quangtrongonline/oc-vuetober-theme

A webpack starting point for single page apps with October CMS and Vue

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.

Installation

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.

Screen casts

Episode 1: Introduction to Vuetober

Episode 2: Using the development server

Episode 3: Registering global components

Episode 4: Communicating with the backend

Features

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.