• This repository has been archived on 24/Sep/2021
  • Stars
    star
    243
  • Rank 165,842 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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



Downloads Depdendencies Version MIT

Vuetober is a vue-cli plugin for creating October themes with the latest frontend tooling. Say goodbye to managing complicated Webpack configuration and build scripts. Just select the features you want, and get to work!

Getting started

There are two ways to get started with Vuetober. If you're new to vue-cli, we recommend using the pre-built SPA. Starting this way lets us make some decisions for you. Just perform a git clone, and you're theme is ready to go. This article provides a good overview of what vue-cli is, and why you should consider using it.

For more experienced users, use the following steps to create a custom Vuetober setup.

  1. Install vue-cli, see documentation here
  2. From /themes, execute the following commands:
    • vue create mytheme and select what features you'd like
    • cd mytheme
    • vue add vuetober and follow the prompts

Once this is done, the following commands should be available:

# start development server
yarn serve

# build production assets
yarn build

Other commands may also be available, depending on the feature selection. Check your package.json for a complete list.

Using plugins

When developing Vuetober themes, APIs are usually needed to communicate with plugins. Since all rendering is done on the client side, October's frontend utilities like components and the AJAX framework are not available. Below is a list of plugins that have been made to help bridge the gap.

Advanced usage

SEO optimization

We recommend adding the RainLab.Sitemap and Bedard.Prerender plugins. When used together, these can make sure your application is compatible with crawlers for sites like Google, Facebook, and Twitter.

Continuous integration

For themes that include frontend unit tests, it's best to connect them to a service like Circle CI and Codecov to get the most out of them. In the future we will provide documentation on setting this up. For now, feel free to use this theme as an example.

Showcase

Here are a couple sites to show what Vuetober themes are capable of. Feel free to add your projects to this list!

License

MIT

Copyright (c) 2016-present, Scott Bedard

More Repositories

1

svelte-heatmap

A light weight and customizable version of GitHub's contribution graph
JavaScript
147
star
2

oc-shop-plugin

An ecommerce platform for October CMS.
PHP
28
star
3

sveltober

Cybernetically enhanced October applications
JavaScript
19
star
4

vue-cli-plugin-moment

moment.js plugin for vue-cli
JavaScript
16
star
5

oc-webhooks-plugin

Integrate October applications with external services.
PHP
15
star
6

vuetober-spa

A single page application for October CMS, with the latest and greatest frontend
Vue
15
star
7

draganddrop

Drag and drop list re-ordering with OctoberCMS
HTML
14
star
8

oc-prerender-plugin

Prerendering plugin for October CMS
PHP
10
star
9

rainlab-user-api

A simple and extendable HTTP API for RainLab.User plugin
PHP
8
star
10

utils

A collection of utility types and functions
TypeScript
8
star
11

scottbedard.net

My personal code playground.
TypeScript
7
star
12

blogtags

Extends the RainLab.Blog plugin to allow for post tagging
PHP
7
star
13

oc-splitter-plugin

A/B split testing for October CMS
PHP
6
star
14

oc-useragent-plugin

Simple user agent detection for OctoberCMS.
PHP
6
star
15

vue-use-three

An experimental integration of Vue's composition API and Three.js
TypeScript
6
star
16

oc-stripe-plugin

Stripe integrations for October CMS
PHP
6
star
17

oc-socialite-plugin

Socialite API for RainLab.User
PHP
5
star
18

oc-shop-plugin-old

Currently being re-written, this version is not maintained
PHP
5
star
19

gradient

A customizable version of Stripe.com's background animation
JavaScript
4
star
20

oc-blogapi-plugin

A simple HTTP API for RainLab.Blog
PHP
4
star
21

analyticsextension

Custom Google Analytics widgets for OctoberCMS.
PHP
4
star
22

twister

Twisty puzzle state modeling
TypeScript
3
star
23

cube

A basic javascript class for modeling Rubik's cubes
JavaScript
3
star
24

tagbox

Not maintained
JavaScript
3
star
25

hexchess.rs

A Rust / TypeScript library for Gliński's hexagonal chess, and the brain of hexchess.club
Rust
3
star
26

vue-heatmap

Work in progress
JavaScript
2
star
27

oc-shop-spa

A single page application for Bedard.Shop
Vue
2
star
28

oc-backup-plugin

Automatically back up your October applications
PHP
2
star
29

warp-buttons

Button effects from Warp
HTML
2
star
30

gulp-octobercms

A gulp file for developing OctoberCMS themes
JavaScript
2
star
31

shipping

A simple PHP wrapper for USPS shipping calulations.
PHP
2
star
32

canvas-ribbon

A quick experiment with canvas elements
HTML
1
star
33

marionette-task

A simple task app with Marionette and Backbone
JavaScript
1
star
34

svelte-routing-bug

Demonstrating a Webpack issue with svelte-routing library
JavaScript
1
star
35

oc-vuetober-plugin

A starting point for javascript heavy October plugins.
JavaScript
1
star
36

oc-contact-plugin

A simple contact plugin for October CMS
PHP
1
star
37

vue-heatmap-old

A quick experiment with Vue.js
JavaScript
1
star
38

oc-uspsdriver-plugin

A USPS shipping driver for OctoberCMS
PHP
1
star
39

beeasyboards.com

A family of skateboarders, snowboarders, and dope people dedicated to cheap beer and good times!
Vue
1
star
40

oc-photography-plugin

PHP
1
star
41

warcraft

A nostalgic attempt to build a game from my childhood
HTML
1
star
42

vue-forward

The missing createApp function from Vue 2.7
TypeScript
1
star
43

pathfinder

TypeScript
1
star
44

vue-chrome

A starting point for Chrome extensions using Vue.js
JavaScript
1
star
45

rollup-karma-starter

JavaScript
1
star
46

oc-shop-theme

An example theme to test features for oc-shop-plugin
HTML
1
star
47

backbone-todo

Simple todo app to learn the basics of Backbone
JavaScript
1
star
48

oc-assetmonitor-plugin

Monitor the size of your an October theme's static assets.
PHP
1
star
49

oc-shop-api

JavaScript
1
star
50

minx

A model to represent the state of dodecahedral twisty puzzles
TypeScript
1
star