scottbedard/vuetober

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

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.

• RainLab.User

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!

• The Speedcube Site
• scottbedard.net

License

MIT

Copyright (c) 2016-present, Scott Bedard

vuetober's Issues

server side rendering

Just wondering if you guys might be able to have server side rendering integrated

Create screen cast series

Since this theme is a pretty significant departure from typical October themes, a screen cast series should be made to cover what exactly this theme does and how to use it. I expect to create these videos when v2.1.0 is released.

Planned videos

• Getting started & creating pages
• Using the develpment server
• Global components
• Communicating with the backend
• Customizing the build setup
• The basics of unit testing
• Continuous integration and code coverage
• Bundle splitting
• State management with Vuex

Yarn run dev hangs the browser down

Hi,

I follow to all steps and can't get my version up and running. Theme compiles well using yarn run build / npm run build and works with october, but the yarn run dev - don't run in the browser, it compiles well, browsersync loads well, console writes that everything was compiled and running - but the app doesn't load in the browser and even hangs it after infinite loading.

node -v 10+
I've tried older issues - no luck so far.
How can i solve this problem?
Thanks in advance.

General strategy of this Repo

Hey Scott,

first of all, thanks for making (and not abandoning, haha) Vuetober! I've been wondering why OctoberCMS doesn't offer this via first-party plugins. I wanted to discuss the viability of your additions in large-scale production environments as I am not sure. Please don't take any offense from my harsh-seeming criticism - I'm only trying to spark fruitful discussions, as I might not be the only one thinking this.

OctoberCMS is an extremely powerful framework that (for the most part) lets you get stuff done really quick. Using various layouts you're free to put your content anywhere you like; using plugins you can add Localization support to your application, and so on.

Now, with Vuetober, a lot of these things seem obsolete as you've got the Vue-Router routing to your custom Vue components, first and foremost. Simply put, what you did is pack vue-cli-webpack into a folder and the only business OctoberCMS has with it is running your index file. Any new page you create, any URL scheme change you make, any layout adaption you develop - it all has to be done by the developer, in the respective .vue or .js files. The actual OctoberCMS backend is useless.

In order to make use of the actual CMS part of OctoberCMS, we have to install API plugins that expose our data to a public endpoint (seemingly without any means of internal security, like access tokens, although that's not a huge caveat as I don't see how you could exploit that), and we have to fetch these data and forward them to our component tree or use Vuex to have components watch changes to the ground truth.

This.
Is.
Super.
Cumbersome.
Then I might as well write a clean Laravel/Lumen API if I can't access October's benefits out of the box, besides having to take care of all of my routing.

I stumbled across Vuetober while looking for something that enables me to easily combine vue-cli into the original OctoberCMS process, i.e. still use the ecosystem with the October router automagically finding the corresponding page, layouts, components, while having the benefit of HMR during development and Reactiveness on the web application itself.

The largest issue I have is that I won't be able to hand the CMS part to my clients and say "there you go, just click 'Add Page', type your desired URL, click that 'EN' thing to translate the page to different languages, and it'll just work!". I work a lot with repeaters and custom tabs in layout files to make it easier for customers to e.g. create a "staff" page. I do not currently see any way to access such functionality from within a Vuetober theme - or at least, not without using JS libraries for parsing the staff.htm page for its variables. What you suggest in #26 is not at all sufficient, because in most cases it is not simply content but a composition of (OctoberCMS) components.
I think #24 is the closest discussion to what I am looking to achieve with this, although I am not completely certain.

Some brainstorming:
Would it be possible to have some kind of watcher running upon OctoberCMS's "save action", that then parses any .htm files changed/created by OctoberCMS, grabs the respective layout and components' markup, fills it with the variables some non-developer changed via the backend, and adds this to e.g. my StaticPage.vue template slot automagically, furthermore inserting a route into my router?

Scaffolding Reactive SPA with only browser

Hi, Scott!

I really love VueJS and I think that October CMS is one of the best CMS for present time.
I has ideas similar to yours about scaffolding Vue within October backend but I change some different way. This is plugin way and I have started to build it https://github.com/Piterden/oc-vuemanager

I know that I will need theme (often only one page) even if we change the plugin way. I suggest to have a theme like dependency of plugin.

Take a look at my plugin, it similar with Cms module of October CMS and has 4 main sections:

• Vue Components Partials
• Vue Components Router Views
• JavaScript Files
• Compiler & Configs

Vue Components Partials

Contains crud table of reusable vue components which we use like part of web page or viewport

Vue Components Router Views

Contains crud table router views - the pages of our app

JavaScript Files

Crud table for files from js folder of app. For example app.js, main.js, router.js, etc.

Compiler & Configs

Here we have gulpfile.js, webpack.config.js, package.json edit forms. Also we can see compiler actions panel which have npm install, npm run dev, npm run prod and any you want (I suppose it's not secure to give to user promt, but we can generate buttons for scripts in package.json)

Forms

Every Vue component crud edit form have script, style and template tabs with codeeditors and we can use right syntax highlighting for each editor. Components stored in database. When you save component from its data creating .vue file in filesystem.

The problem will be to realize realtime bash output in browser, but it is possible.

This plugin should allows users to scaffold Vue SPA from browser only.
I propose to combine our packages. If you have interested, please let me know.

Denis.

Upload files to the server

What files are required to send to the server to production?

Resources fail to load

Scott, I think this is an awesome project. I'm using it to teach students how to create a front-end app from an API with Vue. I would love for them to be able to use this module.

I hate to bother you, but I really would love to solve this. I tried to build an app with the older webpack based version, and then switched to this much cleaner build, as the students would have less to contend with. However, I'm getting the same problem as I had when I tried to adapt your webpack version.

Setting baseUrl is working, but each css or js resource returns the home page on the front-end of October. I suspect the issue is with my implementation. I run yarn build with the baseUrl set to my theme folder, but they all return 404 errors. If you get time, I'd love your feedback on this.

Here is my vue config:

const path = require('path');
const webpack = require('webpack');
const config = require('./config/index.js');
var isProduction = process.env.NODE_ENV === 'production';
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  baseUrl: isProduction
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
  outputDir: '/assets/',
  configureWebpack: {
    resolve: {
      extensions: ['.js'],
      alias: {
        'jquery': 'jquery/dist/jquery.slim.js',
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'],
        'Util': "exports-loader?Util!bootstrap/js/dist/util"
      }),
      // minify our root .htm file and inject production assets
      new HtmlWebpackPlugin({
          chunksSortMode: 'dependency',
          filename: path.resolve(__dirname, 'pages/index.htm'),
          inject: true,
          minify: {
              collapseWhitespace: true,
              removeAttributeQuotes: true,
              removeComments: true,
          },
          template: 'src/template/index.htm',
      }),
    ]
  },
}

I have copied your config from your "opinionated" version, and this is my config/index.js:

var path = require('path');

module.exports = {
    build: {
        assetsPublicPath: '/themes/themename/assets/',
        assetsRoot: path.resolve(__dirname, '../assets'),
        assetsSubDirectory: 'static',
        bundleAnalyzerReport: false,
        env: require('./prod.env'),
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        productionSourceMap: true,
    },
    dev: {
        assetsPublicPath: '/',
        assetsSubDirectory: 'static',
        autoOpenBrowser: true,
        cssSourceMap: false,
        env: require('./dev.env'),
        proxyTable: {},
    },
};

Here is a snippet of the built theme index.htm:

<html class="no-js" lang="en">
<head><meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
...
<link href="/themes/themename/assets/css/chunk-vendors.f5b6289e.css" rel="stylesheet">
<link href="/themes/themename/assets/css/app.0811f92a.css" rel="stylesheet">
</head>

So I am mystified why I get the home page served for every resource. Here's what the css file downloads as:

<!DOCTYPE html><html class=no-js lang=en><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="ie=edge">etc

Thanks for your time...

Improve testing environment

Leaving this here as a note to self, the following has worked nicely on other projects, and should be a default part of the Vuetober scaffold.

• Use chrome headless as the default browser
• Move this bit of logic out of the boot file, it should live in main.js for better testability
• Include spyfu-vue-factory, and create a global factory alias for it
• Include eslint-plugin-mocha, and add mocha/no-mocha-arrows rule to testing config
• Include chai-dom assertions
• Create global helper stubRequests
• Create global helper functions simulate, input, and click
• Refactor example test to demonstrate new utilities

Vue materiails integration

Could you help me integrate vue-materials components in oc-vuetober-theme!

https://github.com/johnleider/vue-materials

I installed via npm

npm install vue-materials

Then I created a file called src\app\plugins\ vue-materials.js

import Vue from 'vue'
import Materials from 'vue-materials'

Vue.use(Materials)

and added the require in file src\app\ boot.js

//
// Plugins
//
require('./plugins/vue-materials')

It's right?

thanks!

Server Side Rendering

Hey Scott, thanks for awesome Vuetober!
Did you ever thought about Vue 2 server side rendering in October?

Although Vue itself is fantastic, static pages are here to stay for a while.
SEO and things, you know.. ;)
I'll be glad to hear your thoughts on that matter.

Error when running npm run dev

When I run the command npm run dev I get this Error:

> [email protected] dev /home/forge/mywebsite.com/themes/mytheme
> node build/dev-server.js

internal/net.js:17
    throw new RangeError('"port" argument must be >= 0 and < 65536');
    ^

RangeError: "port" argument must be >= 0 and < 65536
    at assertPort (internal/net.js:17:11)
    at Server.listen (net.js:1390:5)
    at EventEmitter.listen (/home/forge/mywebsite.com/themes/mytheme/node_modules/express/lib/application.js:617:24)
    at Object.<anonymous> (/home/forge/mywebsite.com/themes/mytheme/build/dev-server.js:103:22)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

npm ERR! Linux 4.4.0-62-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node build/dev-server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the oc-vuetober-theme package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node build/dev-server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs oc-vuetober-theme
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls oc-vuetober-theme

Use generator api to extend vue configuration

The generator is being used incorrectly. Currently, it's templating the vue.config.js file, which could lead to it overwriting other plugin configurations. Here is the API for how we should be doing it...

module.exports = function(api) {
    api.extendPackage({
        vue: {
            pluginOptions: {
                vuetober: {
                    // this will be merged with any existing config
                }.
            },
        },
    });
}

Dev server not rendering anything

I'm trying to implement https://github.com/coreui/coreui-free-vue-admin-template here and can't seem to get npm run dev to render anything. Everything compiles fine and says that it is listening; however, visiting http://localhost:3000 just keepings loading.

What's strange is that if I go up to the october level and run php artisan serve I can view the site just fine.

Any thoughts?

Dev entry point url is hard coded

This url shouldn't be hard coded, it needs to be replaced with options.server
https://github.com/scottbedard/oc-vuetober-theme/blob/cli/generator/template/src/dev.js#L2

Failed to mount component during demo

Hi, I've been attempting to follow your tutorials but I'm not getting any output on my page.

I receive the following error
Failed to mount component: template or render function not defined
From what I've seen online I need to use the standalone version of Vue however I'm a bit lost as to how to achieve this. Could you possibly update your tutorial with some information on how to get the standalone vue version.

Customize layout

How can I define a header and footer to the layout, for example splash.vue layout?

Can I change entry route "/:all?*" to other path?

By default, theme's entry page is "Index" with its routing "/:all?*". But I want set up my own entry page, in which I can link to vue theme SPA.

I this way, I can use user plugin to manage login stuff. It is a bit hard for me to manage login process via ajax.

What do you think?

3.0 Release

We've tagged a release candidate for 3.0, so it's time to start getting the adjacent tooling ready to go.

Screencasts

• Getting started (from scratch)
  • Overview of what vue-cli is now, and how Vuetober has changed from v2
  • Create a basic Vuetober theme, and demonstrate the dev server / production builds
  • Possibly demonstrate how to create a Vuetober preset for rapid project scaffolding
• Getting started (from pre-configured SPA)
  • Demonstrate basic global components, and how to re-style them or register new ones.
  • Demonstrate adding routes, possibly demonstrate how layout components work.
• Using the GUI
  • Building production assets, and demonstrate the built in webpack analysis
  • Installing dependencies and plugins. Possibly use vue-cli-plugin-moment as an example. Doing this could also be a cool example of how the webpack analyzer is useful, and how it can help with debugging production assets.
  • How to avoid "configuration fatigue", show where the Update All Plugins button is
• Loading initial data from the server
  • Possibly demonstrate integration with RainLab.User plugin
• Adding the main Vue libraries
  • Single page applications with vue-router
  • Basic Vuex integration
• Using more advanced tooling
  • ESLint
  • TypeScript
  • Unit and end-to-end testing
• Shipping modern ES2015+ bundles alongside legacy bundles for better performance
• How to inspect / customize the webpack configuration
• Deployments
  • Possibly demonstrate how to integrate with Laravel Forge & Envoyer for zero downtime deployments

Pre-configured SPA

Before releasing 3.0, the pre-configured SPA needs to be cleaned up and have all features implemented. See https://github.com/scottbedard/vuetober-spa/issues for more information.

Multiple Themes

Hey,

I started working with Vue today and i installed this Theme to work with it.

My question is: Can this theme work with other installed themes?

I already have another theme with all my pages that i don't want to work as an SPA which i've been working for months with my team and we decided to have the Dashboard for our users in an SPA style and right now we don't really know what to do with 2 themes. (Only domain.com/dashboard/ would be an SPA)

Since October can only have 1 active theme, there is no way for us to really work with both right? (I thought about the multisite plugin but it doesn't work anymore so that's not an option now).

Global component not working

Following the video on creating global components and the button is not displaying on the page. It does seem to exist in the Vue inspector, just don't see it on the page. Any ideas?

Create dev entry point as .ts file if typescript is being used

The vue-cli exposes a hasPlugin method. We should use this to test if the user is using Typescript, and if so make our dev entry point a .ts file.

Favicon true way

Hello, I really like how you combined these two frameworks! )

I have a question:

Which is the TRUE way for set Favicon on this theme?

Pagination

Implement pagination results?

yarn run dev throws error.

yarn run dev throws following error. Any idea what's going wrong?

I'm new to the entire node and vue scene, so this might be a nooby question though haha.

internal/net.js:17
    throw new RangeError('"port" argument must be >= 0 and < 65536');
    ^

RangeError: "port" argument must be >= 0 and < 65536
    at assertPort (internal/net.js:17:11)
    at Server.listen (net.js:1389:5)
    at EventEmitter.listen (/Users/antoniehogewoning/Web/Sites/rebel59-2017/themes/rebel59/node_modules/express/lib/application.js:618:24)
    at Object.<anonymous> (/Users/antoniehogewoning/Web/Sites/rebel59-2017/themes/rebel59/build/dev-server.js:103:22)
    at Module._compile (module.js:570:32)

Not sure how to use this

Sorry if this is not an issue but instead a question. I've been studying and getting to know both VueJS and OctoberCMS for some time now and I got pretty enthused when I stumbled upon this project of yours. Yesterday I tried to set up a demo project in order to test out your vuetober theme but sadly it didn't work. Could you offer a couple of words on how this is all supposed to work? My expectations were that upon setting up an OctoberCMS project -- as we usually do with new themes inside that platform --, this theme of yours would be added/downloaded and then activated from the backend. I did that (and I followed your installation instructions) but I got a 404 when navigating to the site's home-page.

Any way to have two entry points?

Hi,
As I know, vuetober is designed to setup a Single application, with only one index.htm delivered.
However it's hard to migrate my old website pages into new structure in short time.
If there is any way that I could make multiple pages with many entry point?

/ index.htm <- old static homepage
/products/:id products.htm
/users/:id users.html
/app1/:all?* app1.htm <- new
/app2/:all?* app2.htm <- new

Any advices will be appreciated

Question about development

Hi Scott, first off I would like to say It's really nice the way you have structure this vue plugin ( coherent ).

I have a question about dev env, I have tried to make it work however I haven't been able to either understand how to/or make it work at all ( on dev ).

My understanding with October CMS it's barely minimum ( I should have stated this before ), however I have worked with laravel for a long time so theres that.

When I run either npm run dev or yarn run dev it does fire either localhost:3000 or the http://vuetober.october.dev I'm running october.dev using vallet ( laravel ), however I always get a 404 when visiting any of the above ( local / vuetober .. ), As I understand october requires or tries to find a index.htm file on pages/ dir non is being generated, hence the 404 ?

I have ran npm or yarn using prod and it does place pages/index.htm and then everything works there.

So I guess my question is, could you clarify how or what steps am I missing on these if any or if I'm completely nuts :) ..

Thanks!

package.json generation err.

When I use "vue init scottbedard/oc-vuetober-theme vuetheme" without unit test features, I always get a invalid package.json. There will be a ',' behind "build": "node build/build.js". This will cause npm install error.

"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js", <------ here
{{#unit}}
"test": "karma start test/unit/karma.conf.js --single-run"{{#lint}},{{/lint}}
{{/unit}}
{{#lint}}
"lint": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"{{/lint}}
},

Rainlab Static Pages plugin ?

If I remember correctly, old version of Vuetober had support (or not?) of menus and Static Pages.

As I understand CMS Pages here are totally useless because we have Vue Pages instead. But what about those generates from Static Pages plugin? Can we lay them to REST? ;)

Image asset urls are not correct in built files

They appear to work in development, but are missing a slash in production

Does not work on windows - keeps full path which breaks it

Hello,
on Windows, the plugin builds with wrong baseUrls (publicPath)

The issue is in vue-cli-plugin-vuetober, in the index.js file, there is a hardcoded path separator for linux only '/', needs to be changed in case of windows to '\'.

SOLUTION
You are already requiring "path" library. So all you need to do is to use built-in "path.sep":
https://node.readthedocs.io/en/latest/api/path/#pathsep

How to include Plugins in Vue components?

I have installed a plugin called 'simple contact us', how should I include it on a vue component?

Configure api proxying, and fix session support on development server

Currently, sessions do not work on the development server. This should be the last fix necessary before tagging a release candidate.

Improve routing and send correct 404 status codes

The index.htm page should be converted to a layout, and entry point pages should be generated that match all available routes. This will allow us to send the correct HTTP status code when a 404 page is hit.

Only allow cors requests in development

Leaving this here as a reminder, this condition is backwards. Need to investigate how to get this configured correctly.
https://github.com/scottbedard/oc-vuetober-theme/blob/cli/generator/template/src/index.htm#L9-L12

Issue when not using a template for the Root instance

Hey there.
I sent you an email about this one, but I figured it out, so i'm back here with the solution.
I tweaked Vuetober so I could have a layout that would load my components but not using the Router.

So now I have in my Main.js :

new Vue({
el: '#app',
data: {},
});

With the DOM being generated by October inside div#app.
I was getting this strange behavior where the dom were being completely erased when creating the Vue instance.

Turns out the Webpack configuration is using the wrong vue bundle. It's compiling using vue.js, and according to Vue docs this bundle is supposed to be used as a UMD module, but isn't meant to be compiled with Webpack.

They do provide a vue.esm.js file when pulling Vue with NPM.

The solution is to declare an alias in webpack.base.conf.js as following :

'vue$': 'vue/dist/vue.esm.js',

That's it.
Now you can recompile, and Vue will work as expected when not using the render function.

Hope you can fix it. Ill be happy to discuss the details with you.

4.0 Brainstorming

With the next major release around the corner for Vue and many of it's supporting libraries, it might be time to make some changes to this library as well. The things here are in no way finalized, I'm mainly just using this issue as a place to think out loud.

Ditch the "all or nothing" approach

Currently, Vuetober is designed for use with vue-router and single page applications. While this can be great, it also is unnecessarily limiting for a couple of reasons...

1. There are plenty of times you might want part of your app to be rendered on the client side, and part on the server. The first reason that comes to mind is a blog, where SEO is important, and you don't want to go through the headache of pre-rendering.
2. It means any plugin you want to use must expose an HTTP API. This is often not the case, and requires creating your own APIs, or not using the plugin.
3. Vuetober cannot be added to an existing theme. It's either you start all in with Vue and client side rendering, or you're stuck having to roll your own build setup.

This is going to take some thought about how to implement. The first idea that comes to mind is to simply allow multiple entry points. By injecting the vendor bundle into necessary layout files, and the bundle-specific files into the related pages and partials, we should be good to go. SPAs will still be possible, so this shouldn't cause any regressions.

Note to self, this would resolve #53

TypeScript

Vue 3 is optimized for TypeScript, and I'd love for that to be easy to plug into Vuetober themes (possibly even by default?). We'll need to give this one some thought, because I don't want to step on vue-cli's toes or cause any conflicts. It would be very cool though if all of a theme's javascript assets could be written in typescript, and interface with October's ajax framework.

Failed Yarn Serve

Hi guys!

I am not able to use the vueoctober project in development mode, I am trying to run "yarn serve" and apparently does not display any type of error, however when I access the url it appears that the index cannot be used.

Follow the print below.

I simply cloned the basic project from this link https://github.com/scottbedard/vuetober-spa and ran "npm install" and then "yarn serve"

What did i do wrong?

How to change the devServer host

Hi,
I develop on a remote machine. When I do npm run serve, it always shows http://localhost:8080/. As a result, browser cannot read javascript as 404 error. However changing vue.config.js > devServer does no effect, maybe the plugin has overwritten the config.

How chould I make it mount as https://my-machine:9999/xxxx.js and does hot-reload ?

Any advices will be appreciated

Hot reload is not working

How to fix hot reload? App is compiling but not reload browser .

Attach X-CSRF-TOKEN to all request

The following needs to be added to the index.htm page

function onStart()
{
    $this['token'] = \Session::token();
}

<meta name="token" content="{{ token }}">

And the following should be added to src/app/plugins/resources.js

let token = document.querySelector('meta[name=token]').getAttribute('content');
Vue.http.headers.common['X-CSRF-TOKEN'] = token;

Just a workflow Question

Forgive me for my newbie Questions. But maybe you can help me.

I created a fresh git for my new website and cloned the vuetober-theme into the theme folder. The code is on a aws server, bitbucket and my local machine.

Do I have to install Mamp locally to get npm run dev working? Would be great if it would work without it.

Add validation to application url prompt

If a bad url is entered doing vuetober installation, it can lead to the dev server not starting up properly. Under the hood these prompts are using Inquirer.js, and therefor should support a validate function.

Examples of application urls that don't work with the dev server...

• example.com
• www.example.com
• not a url

Application urls that do work

• http://example.com
• http://www.example.com

Alternatively, we could just add a protocol if none is provided. Not sure if this might lead to unexpected behavior though, this approach might need a bit of research.

Instructions do not yield a working app

Things must have changed since this was released. It simply does not work. I've tried the instructions both here on Github (using Yarn), and the one on Youtube (using npm). Neither result in a working app. Please fix this so it works with updated Vue files.

Failed to decode param.

I tried to install a vuetober theme but after vue add vuetober i cant run serve. This is the error I get in console when connecting to site.

Vue server without vuetober works.
Thanks

URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico' at decodeURIComponent (<anonymous>) at decode_param (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/layer.js:172:12) at Layer.match (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/layer.js:123:27) at matchLayer (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:574:18) at next (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:220:15) at expressInit (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/middleware/init.js:40:5) at Layer.handle [as handle_request] (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:317:13) at /mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:335:12) at next (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:275:10) at query (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/middleware/query.js:45:5) at Layer.handle [as handle_request] (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:317:13) at /mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/mnt/c/laragon/www/vuetober/themes/mytheme/node_modules/express/lib/router/index.js:335:12)

Improve error messaging when production assets haven't been built

Trying to run the dev server before the entry point file is built does not work, and the messaging around this needs to be clearer.

3.0 Todos

Leaving these here as a note to self for all the 3.0 changes

Features being worked on

Development tools

• Remove browserSync as a dependency, there is no need for it anymore
• Add a git ignored file to hold machine specific configuration
• Add a constants.js file
• Optionally include vuex, vuex-router-sync, and spyfu-vuex-helpers out of the box
• Only attach X-CSRF-TOKEN to local requests

Testing environment

• Include spyfu-vue-factory and demonstrate it's use
• Include karma-chai-dom assertions and demonstrate their use
• Include mocha-chai eslint rules to prevent arrow functions in describe and it blocks
• Switch default browser to Chrome headless
• Move this bit of logic to main.js for better testability
• Create factory, simulate, input, click, and stubRequests helpers
• Get coverage to 100% and demonstrate integration with codecov
• Add global vm containers that are reset before each test

Boring stuff that has to get done

• Clean up files in build and config directories
• Make sure php errors are displayed on dev server
• Update README.md file to reflect changes
• Get demo site configured with new template

Possible things that could be added

• Optionally set the defaut scripting language to TypeScript
• Create helper to pre-render certain routes

unmet peer dependency

[email protected] /Users/olivier/projects/cpuk/vuetober/themes/cpuk
├── UNMET PEER DEPENDENCY [email protected]

npm WARN [email protected] requires a peer of sinon@^2.1.0 but none was installed.