this is awesome hope you update soon thanks

Including Unit Tests and End-to-End (e2e) Tests.

When i build scrips i get this error

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

I think it's script can't write in index.html

Hi! I think this question excites many users and maybe it is worth adding to boilerplate as example code.

Vuex based on global state and if you want to use form validation (server side) and API pagination your should duplicate state object for any CRUD operation.

So, for example how use pagination with vuex:

// src/store/modules/position/actions.js
import Transformer from '@/transformers/PositionTransformer';
import PositionProxy from '@/proxies/PositionProxy';
import _ from 'lodash';

export const all = ({ commit }, payload) => {
  const page = _.get(payload, 'page', 1);
  new PositionProxy(payload)
    .setParameters({ page, per_page: 5 }).all().then((response) => {
      commit('ALL', Transformer.fetchCollection(response.data));
      commit('PAGINATE', Transformer.paginate(response.meta.pagination));
    });
};

export const create = ({ commit }, payload) => {
  new PositionProxy().create(payload).then((response) => {
    commit('ACTION_MESSAGE', response.message, { root: true });
  }).catch((response) => {
    if (response.status === 422) {
      commit('VALIDATION', response.data.error.validation);
    }
  });
};

export default {
  all,
  create,
};

// src/store/modules/position/mutations.js
export default {
  ['PAGINATE'](state, pagination) {
    state.pagination = pagination;
  },
  ['ALL'](state, items) {
    //console.log(items);
    state.all = items;
  },
  ['VALIDATION'](state, array) {
    state.validation = array;
  },
};

// src/store/modules/position/state.js
export default {
  all: [],
  pagination: {
    total: 0,
    perPage: 5,
    currentPage: 1,
    totalPages: 1,
    links: []
  },
  validation: []
};

// getters.js and index.js like as boilerplate

Position is a CRUD object which have a two standard things: pagination for list all items in table and server side validation .

If u want add more CRUD object this things will be same and always will be duplicate. Because state should be unique for any object. If pagination will become global state, multiple tables will be works together on the one page. Same situation with validation, if use global validation state for any form.

Okay, I can merge object to prevent duplicate for vuex module files. But what do with duplications in actions of create/update/delete actions where I should handle validation? This part:

//...
  }).catch((response) => {
    if (response.status === 422) {
      commit('VALIDATION', response.data.error.validation);
    }
  });

Maybe your know how to solve this problem? How to put it in a common place (commit() allow only in action callback)?

I was not able to use it in windows from scratch until:

added 'linebreak-style': ["error", "windows"] to .eslintrc.js
and run npm install babel-runtime --save

In app/store/modules/auth/mutations.js on line 25:
Vue.http.headers.common.Authorization = null;

When this is fired and future xhr request are made, these request will fail because of the error: null is not an object (evaluating 'str.replace') in the trim function of vue-resource

It is fixed by replacing that line by:
Vue.http.headers.common.Authorization = '';

Your boilerplate is great! I have a question:

I wrote in src/assets/styles/app.styl this:

.logo {background-image: url('/static/img/logo.png')}

But seems like it is not affected with webpack url-loader - I expected hashed url in builded project, but it is not. Can you please give the example about how to correctly configure webpack to apply url-loader for urls inside .styl files? Thank you!

Intermittently, npm run dev would throw:

ERROR in ./src/app/store/modules/account/mutations.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/defineProperty' in ./src/app/store/modules/account
 @ ./src/app/store/modules/account/mutations.js 7:23-70

ERROR in ./src/app/store/modules/auth/mutations.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/defineProperty' in ./src/app/store/modules/auth
 @ ./src/app/store/modules/auth/mutations.js 7:23-70

ERROR in ./src/app/transformers/account.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/object/get-prototype-of' in ./src/app/transformers
 @ ./src/app/transformers/account.js 7:22-78

Running npm install babel-runtime --save resolved

I'm wanting to retrieve a users data from my external API when someone views a profile page by grabbing the users ID within the route params. The issue is when the server responds I can't just go this.user = response since this is undefined as it's not in a Vue file. I'm not sure if I'm using the boilerplate correctly in this case.

Am I going to need to setup an entire new vuex state to hold the data I'm trying to access then retrieve it from there? I just don't understand on how you could achieve this in the way the boilerplate is setup as all my users data is not being updated after the response and continues to be null.

import Vue from 'vue';

let user = null;

export default {
  data() {
    return {
      user,
    };
  },
  computed: {
    user: () => {
      return user;
    }
  },
  created: () => {
    Vue.$http.get(`/users/${Vue.router.app._route.params.id}`)
      .then((response) => {
        user = response.data;
      });
  },
  components: {
    VLayout: require('layouts/default/default.vue'),
    VPanel: require('components/panel/panel.vue'),
  }
};

I am getting this error when i do npm run dev

(node:5361) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

anyone have any idea what's the reason for it to happen ?

node 6

hi sir.. i try to write a mixin inside a module and try to get it as import { mixin } from '@/store/modules/account';
this doest work but this one
import { mixin } from '@/store/modules/account/mixin';

am i doing it right ?
thanks

Hi,
Could you deliver sample dockerfile that would work with this boilerplate?
I can't make it work, mine is:
FROM node:4.6.1

RUN apt-get update && apt-get install python-dev -y
RUN npm cache clean -f
RUN npm install [email protected] -g

RUN mkdir /project
&& chmod -R 777 /project

RUN useradd -ms /bin/bash docker
USER docker

WORKDIR /project

#CMD [bash]

after npm run dev i get:
(Error is somehow connected with babel I guess)

error in ./src/App.vue

Syntax Error: Unexpected token {

@ ./src/main.js 50:0-24
@ multi ./build/dev-client ./src/main.js

error in ./src/routes/index.js

Syntax Error: Unexpected token (13:21)

11 | path: '/home',
12 | name: 'home.index',

13 | component: () => import('@/pages/Home/Index'),
|

sorry if this doesn't belong here but i thought it'd save me some time if you could just mention how to run the dev build with watch and hotreload enabled? I see you're already loading those middlewares I just don't know how to use it

thanks alot

How to run in production mode?

Hi, thanks for the great boilerplate! Question: I just started with Vue.js and I'm wondering why you're creating a new directory 'App' inside the src-directory and import the whole directory in main.js: (import * as App from './app';). I don't see a lot of other boilerplates doing the same. Is there a reason you separate main.js, bootstrap.js and /assets/ from other app files?

Why don't you place the <router-view> from Index.vue inside index.html and insert store and router inside the 'new Vue()' statement and keep everything inside the src directory?

hi sir.. i have this trouble about component communication, What would be the best approach for this should i use a global EventBus or make an entry to store for the UI components ?
thanks

I have set of *.styl files that are imported into app.styl. When I change something in the app.styl, Webpack reflects that change in a browser instantly, but Webpack ignores changes in those Stylus files until I edit app.styl or rerun 'npm run dev'. How to make it watch all the stylus files?

below is my app.scss which I am importing in bootstrap.js.

@import "color";
@import "variable";
@import "breakpoints";
@import "mixin";
@import "common";
@import "ComingSoon/comingsoon";
@import "Home/home";
@import "NavBar/navbar";
@import "StickyHeader/stickyheader";
@import "HowItWorks/howitworks";
@import 'ProjectCard/projectcard';
@import "ContactUsCard/contactuscard";
@import "ContactUs/contactus";
@import "PromotionalSection/promotionalsection";
@import "OurPartners/ourpartners";
@import 'Internal/loginandforgot';
@import 'Customer/customerlogin';
@import 'Footer/footer';

and below is my build/utils.js

  var postcssLoader = {
    loader: 'postcss-loader',
    options: {
      plugin: require('autoprefixer'),
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

  function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, postcssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

It is unable to auto prefix the css. And my flex is breaking in almost all browsers(which uses vendor prefix).

hi sir.. is there any other way to use existing jquery with this boilerplate ? because i have this working UI with jquery and i want to use it and make the data with vuejs ..
thanks sir.

Hi @petervmeijgaard
is there a problem that in server site just return camelCased json data?
so, we do not need transform stuff here?

thx

vue-resource is being retired: https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.xk0b5eimw

Note that this is different from deprecated. It just isn't an official recommendation anymore. To quote the reasoning:

1. Unlike routing and state-management, ajax is not a problem domain that requires deep integration with Vue core. A pure 3rd-party solution can solve the problem equally well in most cases.
2. There are great 3rd party ajax libraries that solve the same problem, are more actively improved/maintained, and designed to be universal/isomorphic (works in both Node and Browsers, which is important for Vue 2.0 with its server-side rendering usage).
3. Given (1) and (2), it’s obvious that we are duplicating the effort and bringing in unnecessary maintenance burdens by keeping vue-resource’s current status. The time we spend on resolving vue-resource issues can be better spent improving other parts of the stack.

It might be a good idea to instead promote usage of something like isomorphic-fetch or got. I'd be happy to submit a pull request for either provided interest.

Also recommended from the blog post: Axios.

Run npm run dev and got error: bind is not a function

Update package.json from vue-i18n": "^4.x to vue-i18n": "^5.0.0 fix it

I've set my api endpoint the config however when I attempt to login ect it doesn't use the API

Include a GrpahQL client in the boilerplate, including proxies and store.

Where to define Webpacks assetsSubDirectory

Missing import Proxy from '@/proxies/AccountProxy'; in /src/store/modules/account/actions.js.

Hi all,

thank you @petervmeijgaard for this package.

Hi try to enable history mode on bootstrap.js like this :

export const router = new VueRouter({
  mode: 'history',
  routes: [routes],
});

no error on webpack, but on browser console i got this error

[vue-router] "path" is required in a route configuration

I try to set root parameter on VueRouter constructor but error remain.

Thank you very much!

Hi There!

When running npm install, herewith some deprecated packages:

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

found 11 vulnerabilities (1 low, 1 moderate, 8 high, 1 critical)

Hi! Scaffolding in windows is kinda broken for me.

1. By default it drops:

`E:\01 Coding\order\task\create-component\task.js:3
class CreateComponent {
^^^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup
ported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "create" "page" "agents"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] create: node task/create-component/task.js "page" "agents"
npm ERR! Exit status 1

But this can be fixed by adding "use strict"; to the top of the \task\create-component\task.js

2. Then it exits with:

E:\01 Coding\order>npm run create page agents

[email protected] create E:\01 Coding\order
node task/create-component/task.js "page" "agents"

Start create-component task
Create main component: agents
fs.js:794
return binding.mkdir(pathModule._makeLong(path),
^

Error: ENOENT: no such file or directory, mkdir 'E:\src\app\pages\agents'
at Error (native)
at Object.fs.mkdirSync (fs.js:794:18)
at CreateComponent.createMain (E:\01 Coding\order\task\create-component\task
.js:92:8)
at CreateComponent.init (E:\01 Coding\order\task\create-component\task.js:71
:10)
at new CreateComponent (E:\01 Coding\order\task\create-component\task.js:51:
10)
at Object. (E:\01 Coding\order\task\create-component\task.js:143:
1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "create" "page" "agents"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] create: node task/create-component/task.js "page" "agents"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] create script 'node task/create-component/task.js "page" "agents"'.
npm ERR! This is most likely a problem with the vue-2-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node task/create-component/task.js "page" "agents"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-2-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls vue-2-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! E:\01 Coding\order\npm-debug.log

It looks like the app path is not recognized correctly (mkdir 'E:\src\app\pages\agents', and my app full path is "E:\01 Coding\order")

Debug log:
npm-debug.log.txt

u can close this issue at any time, just want to tell u I like this boilerplate!!

for before I have been spend a lot of time on writing vue/vuex 1.0 app!

now trying to move in to 2.0!

HOLA!!!

When launching npm i, I have the following warning message:

npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Thanks

i am not familiar with eslint how to remove or change it to standard ?
thanks

Can I integrate this in https://github.com/petervmeijgaard/jwt-example ?
If yes then have you any suggestion?

hi i'm new to vuejs.

i want to put some logic into layout component. ( login, register modal )
but slot content is disappeared after update binding.

for example.
i modified layouts -> minimal.html

<div
  class="container"
>
  {{ test }}
  <input type="text" v-model="test">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <slot></slot>
    </div>
  </div>
</div>

and layouts -> minimal.js

export default {
    data() {
        return {
            test: 'test'
        }
    }
};

after change input box, pages -> login -> index content was disappeared.

is it normal? i thought layout is also vue component.

thank you.

Hey,

Thanks for the time to put together this boiler-plate. The following may seem stupid, but what are the steps to deploy this to a server? I've looked around a bit and this step seems to be oft-neglected on the web. I was hoping that everything would compile down to HTML, JS and CSS, and it wouldn't need node on the server to run, but I think I'm mistaken?

Regards,
Devon Mather

This path is wrong and should be import from './plugins/vuex.js' instead, isn't it?

EDIT: Forget it... i'm just confused today xD

First of all: Awesome boilerplate 👍

Now to my problem:

I tried to install postcss-loader to autoprefix css with vendor prefixes.

Since I already installed sass-loader successfully, I would have expected postcss-loader to also work by just doing npm install postcss-loader autoprefixer --save-dev.

But sadly my css is not getting autoprefixed... Do I have to change something in .postcssrc.js?

i import the authproxy then called authproxy.login()
log error is auth.login is not a function..

thanks

I'm starting with Vuejs, and after some time reviewing the framework, I wanted to start with a template, this seems excellent for keeping my first project well structured and at the same time understanding the framework.

I have a question with the proxies. I am implementing them, but using your reference code I get the following error with the login:

Uncaught ReferenceError: payload is not defined

This is my code in src/store/modules/auth/actions.js

import Vue from 'vue';
import Proxy from '@/proxies/AuthProxy';
import store from '@/store';
import * as types from './mutation-types';
...
export const login = ({ commit }) => {
    new Proxy()
    .login(payload)
    .then((response) => {
        commit(types.LOGIN, response);
        store.dispatch('account/find');
        Vue.router.push({
            name: 'home.index',
        });
    })
    .catch(() => {
        console.log('Request failed...');
    });
}
...

As I understand it, in src/pages/login/Index.vue in the login method, the user object is sent to the auth/login action, so this object should arrive as a parameter until actions.js / login.

What is it missing? The query may be is basic, but I do not see how to go about learning this framework.

This is my favorite boilerplate for vue, and I've tested a lot.
Any chance that this will be maintained again and ported to support webpack4 and all the latest versions?

I'm getting a 'Redirect is not a function' in the bootstrap.js file, on router.beforeEach guard.

I have read the Vue Router doc (http://router.vuejs.org/en/advanced/navigation-guards.html) and it says that global guards has the following signature:

router.beforeEach((to, from, next) => {
  // ...
})

So to redirect we have to use the next argument.

Hello everyone.

This is the situation, I successfully deployed my application on server using the default base href, that is: www.my-site.com
but my problem was, when I tried to deployed on a preexisting site, in a sub-folder, something like this:
www.pre-existing-site.com/**my-app**

I only get a blank page with theses erros on console
manifest.da43be1555a119727311.js:1 Uncaught SyntaxError: Unexpected token < vendor.abe8c51c49b85b8961c6.js:1 Uncaught SyntaxError: Unexpected token < app.df6b4dc9228211035998.js:1 Uncaught SyntaxError: Unexpected token <

I know this erros is related to the base href settings to the assets path, and I know there's a way to config this in an Angular project, but I didn't manage to config this on this project.

My question is, how can I config this the base href on build projects?
Thanks you all.

Hi,

Running npm run build gives the below error:

ERROR in static/js/app.ad81c56779b474d07f40.js from UglifyJs
Unexpected token punc «)», expected punc «(» [./src/bootstrap.js:27,2][static/js/app.ad81c56779b474d07f40.js:142,6]

The error is from UglifyJS plugin which doesn't support ES6 code yet (unless using the harmony branch, which is still in development)

Is this because the code is not getting transpiled to ES5 correctly?

Opening the production version in IE11 gives the same error in console and the site doesn't load.

Please can you have a look?

Thanks in advance.

Hy Pete, thanks to make awesome boilerplate. i want to ask something..
how to change the folder base in vueture-cli (https://github.com/vueture/vueture-cli). when i start to write :

vueture make:layout Base

the component built inside src/app folder instead of src folder like your boilerplate has. Thanks.

-src
  -app
    -layouts
      --Base.vue
  ...
  -layouts
    --Default.vue

I am trying to require SASS instead of stylus in bootstrap.js by replacing

require('./assets/stylus/app.styl');

with

require('./assets/scss/app.scss');

but I get this error

This relative module was not found:
* ./assets/scss/app.scss in ./src/bootstrap.js

and in browser

ERROR in ./src/bootstrap.js
Module not found: Error: Can't resolve 'style' in '/Users/james/Documents/Projects/vue-test2'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ ./src/bootstrap.js 78:0-34
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Is this possible a misconfiguration in the utils.js file to do with styleLoaders function or the generateLoaders() function?

I have all necessary dependancies installed:
sass-loader
style-loader
css-loader
node-sass