bencodezen/vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

vue-enterprise-boilerplate's Issues

Integration with json-server

Have you considered integrating https://github.com/typicode/json-server as a mock server rather than the current, more manual approach?

It might add some simplicity and make that logic a little more clear.

Update polyfill docs

@chrisvfritz The polyfills section in the docs is currently wrong. I'd update it myself but I'm sure you can explain it much better 😅

I guess the modern build doesn't need polyfills and the legacy build is polyfilled by Babel?

Thanks!

Git shallow clone issue

Hi!

On the readme, the recommended way of installing this project from scratch is to create a shallow clone

git clone https://github.com/chrisvfritz/vue-enterprise-boilerplate.git my-new-project --depth 1

Problem

This can lead to issues like the shallow update not allowed error if you change the remote URL.

Solution

You will have to re-add this project to your project's remote

git remote add old https://github.com/chrisvfritz/vue-enterprise-boilerplate.git

and after that you can

git fetch --unshallow old
git remote rm old

Outro

I think switching this template to be created by vue cli might work. Just my 2 cents

Getting started part is not working

Hi,

I'm following the instructions from the Getting Started section of the readme, but it fails at the third step.

After cloning repo, and going inside the directory, running
node _start.js throws error :

module.js:540
    throw err;
    ^

Error: Cannot find module 'date-fns/format' .....

Tried installing date-fns globally, still same error. Running
npm install throws error :

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node index.js --exec install`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.

How can I fix this ?

System info: MacOS 10.13.3, NPM v5.6.0, Node v8.9.4

CSS property ordering on save?

I had a question about the vscode on save formatting functionality. I noticed the project uses the stylelint-config-recess-order plugin. Should the property re-order formatting be happening on save in vscode? Right now I get the linter warnings, and other CSS/Sass formatting is automatically fixed on save, but not the property re-ordering.

It does work when I run the yarn lint command manually though, but I'd love it if this worked on save. I've used the stylelint-order plugin for a while now in non-vue projects, so I'm used to this functionality.

I appreciate any help you can give.

Prevent layout component re-rendering

I've been refactoring a work project using this repo as reference, and I've run into a snag. When navigating from one view to another, I'd like to avoid re-rendering the layout components that the views have in common. I'm after this for two reasons: one is efficiency, of course, but the more visible issue is that I'd like to transition the components that are entering and leaving.

For example, my "home" and "404" views use a layout that does not include a sidebar. The rest of my views use a second layout that does. When moving between "home" and another route, I'd like the sidebar to appear with a simple, satisfying transition; so, I wrap it in a <transition appear> tag and it works as anticipated. However, the sidebar also transitions out and in between routes that share the layout.

Thinking it would solve the problem, I removed the key attribute from the <router-view> in my app.vue , but to no effect.

I know there's not much in particular to be done without looking at the source (which I am not permitted to share), but can you think of anything off the top of your head that I should check? Something basic I might have overlooked?

Vuetify

Hello!
Excuse me for my English)

I added a vuetify to this boilerplate.
But the components do not use colors from the theme.
for example

looks like this

and vuetify object

I hope you can tell me what I'm doing wrong.

Discussion: best practice Axios setup for production builds

As per vue-cli docs, environment-specific variables are configured separately from code – a la the "twelve-factor app" methodology – in .env files. Only environment variables that start with VUE_APP_ will be statically embedded into the client bundle. So for a production build, you'd presumably have something like:

# .env.production (or .env.production.local if this file is to contain secrets)
VUE_APP_API_BASE_URL=https://api.example.com

And in code use a pattern similar to the following:

// src/utils/http.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
});

export default axiosInstance;

// src/state/modules/auth.js (for example)
import http from '@utils/http';
...
const res = await http.post('/session');
...

However, this doesn't seem to play well with this project's use of Axios in tests: the Jest-backed mock, test/unit/__mocks__/axios.js, will be used when an equivalently named module is imported, i.e. import axios from 'axios'. But we're obviously not importing the node module directly like this in code now, so you end up with an error such as: _axios.default.create is not a function. The project is also not calling vue-cli-service test but the jest command directly, so variables from relevant .env files are not being installed because the mode is not set to test – but with that you could hack something akin to:

# .env.test.local
MOCK_API_PORT=9000 # for mock api server
VUE_APP_API_BASE_URL=http://localhost:${MOCK_API_PORT}

And remove test/unit/__mocks__/axios.js. T'is a bit nasty though.

Therefore, what would be a "best practice" solution to this?

If I remove test/unit/__mocks__/axios.js and replace with the following, then this is working for me currently both in testing and development, as well as for production builds:

// src/utils/http.js

// For production builds, require a VUE_APP_API_BASE_URL environment variable to
// be set -- this will result in `baseURL` being statically embedded in the
// build instead of being derived at runtime.
//
// By default in development and test, requests are filtered through the mock
// API in `tests/mock-api`. To test directly against a local/live API instead,
// run development and test commands with the API_BASE_URL environment variable
// set. (See also: `devServer` setting in `vue.config.js`.)

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL:
    process.env.VUE_APP_API_BASE_URL ||
    process.env.API_BASE_URL ||
    `http://localhost:${process.env.MOCK_API_PORT}`,
});

export default axiosInstance;

--- a/tests/unit/setup.js
+++ b/tests/unit/setup.js
-import axios from 'axios';
+import http from '@utils/http';

-  axios.defaults.headers.common.Authorization = options.currentUser
+  http.defaults.headers.common.Authorization = options.currentUser

This still feels a bit icky, though. Hence I'm wondering if I'm missing something obvious/slicker.

Spread operator not working during webpack parsing.

Module parse failed: Unexpected token (33:49)
You may need an appropriate loader to handle this file type.
|
|   // Add the module to our modules object
|   modules[modulePath.pop()] = {namespaced: true, ...requireModule(fileName) }
|
|   // Recursively get the namespace of the module, even if nested

Cypress component naming best practices

I'd love to contribute to this repo, what do I have to do to become a contributor?

I have a pull request that adjusts some of the cypress tests to align better with their stated best practices. It's something that's worth discussing.

Specifically using the data-cy attribute for selection, instead of relying on DOM selection, ids or css.

Generate a link to a diff between the latest SHA at clone and the current master

Maybe this could be a pre-clone hook (if one exists) that only happens if the origin is this repo?

Router error on logout

Seeing the following error when immediately logging out after login:

Steps to reproduce

• Start the dev server
• Login to the starter app with admin/password
• Immediately click the logout button
• Observe the error

Interestingly, when navigating to another route before then, the error is not observed

Query and router params type casting

When getting data from the router, it seems that the params are all strings. I'm not using type script but find the need for some sort of casting library to ensure that the params I get from the query (or anywhere else in the router) follow proper type casing.

Right now, I'm doing this kludge:
`const { filters } = this.$route.query

if (filters.site_id) {
filters.site_id = parseInt(filters.site_id)
}`

Example:
`const structure = {
site_id: Number
}

const castedQuery = cast(structure, this.$route.query)`

I think integration with some simple form of casting library could be a huge help for keeping params consistent across enterprise applications.

error: Unexpected console statement

Clean install. Then yarn, yarn e2e.

error: Unexpected console statement (no-console) at src/components/_base-link.vue:44:18:
error: Unexpected console statement (no-console) at src/components/_base-link.vue:52:18:
...

Add code generators for components, tests, etc

Credit to @shentao and @michalsnik for the suggestion. Hygen might be the best option.

auth0.com Integrations

How would you incorporate a auth0.com integration?

Component organization

I did have a question related to #6. Not necessarily each component to a sub directory, but more about component organization overall.

With both reusable and non reusable components, it gets a bit tricky.

1. How should we organize non-reusable components related to a specific domain?
   Let's say there are a dozen components that are specific to the UserShow page. How and where should they exist? In my apps, I've ended up making a folder for the UserShow and then a components directory there which feels ok.

EG:
src/router/views/UserShow/Layout.vue
src/router/views/UserShow/components/A.vue
src/router/views/UserShow/components/B.vue
src/router/views/UserShow/components/B.vue
....

2. in the src/components directory, I only house shared and reusable components

How do you go about this, once components and sub components become larger and more complex? This is another thing that is never shown in boilerplates, what happens when the files grow beyond the simple, single component organization.

I've used atomic design before in some of my react apps with mixed results, since it's not always clear what goes where.

3. Bonus question: Curious why you added the views and layouts underneath the router folder? I guess I always saw the router as an organizational tool, but the page itself as it's own entity, separate from the router. In my past projects, I've created "src/pages" directory for all page level components (or views).

Integration with vuex-loading

I haven't used this plugin yet, but certainly have vue state level loading, isLoading etc params riddled across my components. It feels messy but it's quick and dirty.

Wondering if it would make sense to integrate something like vue-loading to handle this in a more clean way?

yarn lint changes .min.js files

I make uglified .min.js versions of some of my libraries.

It might be good idea to add "*.min.js" to .eslintignore and .prettierignore or "yarn lint" will un-uglify .min.js files.

Jest SyntaxError: Unexpected token ...

Cant get vscode Jest working, when I start it on the output tab I get this error:

SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/Users/beyersito/Projects/TryIT/vue-enterprise/tests/mock-api/routes/auth.js:1:77)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)

Finished running all tests. Starting watch mode.
SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/Users/beyersito/Projects/TryIT/vue-enterprise/tests/mock-api/routes/auth.js:1:77)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)

When I run yarn run unit:watch, it works as expected.

When we will upgrade to Vue CLI v3 (stable)

Readme: Clone the repository Error Permission denied

$ git clone [email protected]:chrisvfritz/vue-enterprise-boilerplate.git
Cloning into 'vue-enterprise-boilerplate'...
Permission denied (publickey).
fatal: Could not read from remote repository.

I suggest

git clone https://github.com/chrisvfritz/vue-enterprise-boilerplate.git --depth 1

Recompile making development slow

Not sure if this is a vue-cli 3 or vue-enterprise-boilerplate issue, but it now takes me about 7 seconds every time I save (to recompile the files).

I'm using this boilerplate in a large, enterprise application. Before with my previous config, it would only reprocess the file that changed, making hot reload and app updates take seconds (if not milliseconds).

Is there some settings that we can adjust to make saving only recompile the file at hand when in development mode?

I'm currently just running the app with yarn dev

Question: Components as separate directories

Firstly, very good boilerplate.
I wonder about components location. From my point of view you should keep components as separate directories. In case when you have multiple files for each components like unit tests etc. and in the future it might be more. So when amount of global components will be bigger, this folder might be a bit messy. What do you think ? It is dictated by _globals.js for global component registering ?

Handling URL paths and path generation functions

This is an issue I've been toying with as my app grows. How to handle URL paths within the app. What I mean specifically, is building route paths, path helpers etc.

As my app grows, having to build all of my URL paths inline in the templates feels clunky.
option 1: { name: 'site.page', params: { site_id: siteId, page_id: result.webpage_id }}
option 2: "/sites/" + site.id + "/edit

Neither feel clean to me, to have in a template. If the params change or new ones are added, I have to go through and change all my templates, not to mention I need to get the name right. If I don't, and don't set it with strong dicipline in the router, the paths break.

My question is this, have you considered a path generation module, something that could be imported as needed, or perhaps as a plugin?

this.$paths.sitePath({ site_id })
OR
import { sitePath } from '@/modules/paths'
<router-link :to="sitePath({ site_id })

Obviously these all "work", but what's best as an application grows to thousands of routes.

Question: How are you able to use `jest` and `webpack` without explicitly defining them as devDependencies?

I'm pretty sure you have access to webpack via the vue-cli-service:
https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/package.json#L6

But I'm less sure about jest:
https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/package.json#L12

Do you rely on it being installed globally? If so, why that choice? If not, what black magic is taking place here? (:

Warnings during install and does not work

Sorry if this is a simple problem, i'm not used to node. I did what the documentation said and this happened:

22:44 $ node _start.js 
22:44 $ rm _start.js 

22:45 $ yarn install
yarn install v1.6.0
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning "@vue/cli-plugin-babel > [email protected]" has unmet peer dependency "webpack@>=2".
warning "@vue/cli-plugin-e2e-cypress > [email protected]" has unmet peer dependency "eslint@>= 3.2.1".
warning "@vue/cli-plugin-eslint > [email protected]" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
warning "@vue/eslint-config-prettier > [email protected]" has unmet peer dependency "eslint@>=3.14.1".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=4.18.0".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "[email protected] - 4.x".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=3.1.0".
warning "@vue/eslint-config-standard > [email protected]" has unmet peer dependency "eslint@>=3.19.0".
warning " > @vue/[email protected]" has unmet peer dependency "[email protected]".
warning " > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
[5/5] Building fresh packages...
Done in 208.40s.

22:50 $ yarn dev --open
yarn run v1.6.0
$ vue-cli-service serve --open
 INFO  Starting development server...
 10% building modules 1/1 modules 0 activeevents.js:165                            
      throw er; // Unhandled 'error' event

Error: watch /home/jule/ocs/socketchat/public ENOSPC
    at FSWatcher.start (fs.js:1409:19)
    at Object.fs.watch (fs.js:1435:11)
    at createFsWatchInstance (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:228:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:407:19)
    at FSWatcher.<anonymous> (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:455:19)
    at FSWatcher.<anonymous> (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:460:16)
    at FSReqWrap.oncomplete (fs.js:171:5)
Emitted 'error' event at:
    at FSWatcher._handleError (/home/jule/ocs/socketchat/node_modules/chokidar/index.js:260:10)
    at createFsWatchInstance (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:39:5)
    at setFsWatchListener (/home/jule/ocs/socketchat/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    [... lines matching original stack trace ...]
    at FSReqWrap.oncomplete (fs.js:171:5)
error Command failed with exit code 1.

imagemin-lint-staged

hi thanks for this boilerplate it is awesome.
I have a question for imagemin-lint-staged , does it really help build speed and bundle time?

Vuetify colors don't work when changing keyName in vue-meta

Hi! As of [email protected], it uses vue-meta but has metaInfo hardcoded in the source code. Therefore, changing keyName to something else breaks some theme-related functionality in Vuetify. This boilerplate uses page instead of metaInfo so it is incompatible for now.

nuxt/vue-meta#215

@chrisvfritz I guess there's nothing to fix here but I thought this information could be useful for somebody else :)

Integration with vuex-forms (or something similar)

One thing I've found a very limited amount of discussion and OS tools for is vuex-forms. There is an existing project but that project seems dead (hasn't been updated in over a year). I'm thinking about forking it and making it live again.

Either way, I end up handling most of my form manipulation in the component b/c it's easier than a ton of the CRUD vuex and vue boilerplate required to send it all back to the vuex store.

Would be great to see a best practices implementation of handling forms. Even if it's a bit more verbose, standardizing it across my applications and forms would bring a lot of stability and clarity to my forms.

app.vue cloning to App.vue in some environments

using 'yarn dev --open' after initially cloning the repo resulted in this error.

ERROR Failed to compile with 1 errors
This relative module was not found:

• ./app in ./src/main.js

line 2 of src/main.js should read

import App from './App' (note the capitalized 'A' in ./App)

.DS_Store file breaks mock-api

Im working on a mac, the OS put a .DS_Store file into the tests/mock-api/routes/ directory.

This resulted in breaking the require statement on line 9 of tests/mock-api/index.js because the .DS_Store file does not have module.exports defined inside it.

I suggest adding something like this before to fix the problem

if(fs.existsSync(`${path.join(__dirname, 'routes')}/.DS_Store`)){
    fs.unlinkSync(`${path.join(__dirname, 'routes')}/.DS_Store`)
  }

I have not gone through the rest of the project to see if entire directories of files are being required in this way elsewhere, but a project wide solution to this problem may be better.

Integrate storybook for components

I'd like it to be pretty seamless and built into the main development workflow, so possibly as a <story> custom block inside .vue files.

yarn lint breaks _typography.scss

"yarn lint" breaks _typography.scss file in windows 10 after clean install (tested with two machines).

yarn lint
yarn run v1.7.0
$ eslint --ext .js,.vue --fix . && stylelint --fix "src//*.vue" "src//.scss" && markdownlint docs/.md .md && prettier --list-different --write "**/.{js,json,css,scss,vue,md}"
src\design_typography.scss
error Command failed with exit code 1.

Compatibility with latest vue-cli

yarn upgrade-interactive --latest
yarn dev

Invalid options in vue.config.js: child "css" fails because ["modules" is not allowed]

problem with background url

Using the @assets alias on background-image: CSS attribute is not working

it's not reading the root path

ex: background-image: url('@assets/images/1.jpg');

the image will not be rendered on the browser

Sorry for such a NOOB question, but how would i go about orgnaizing the components into folders?

I'm planning on having about 400 different pages within my app and I would like to organize the components into folders like components/base/_base++ and components/navbar/navbar vue files. I was able to move the navbar files to a folder, but i'm having an issue with the base files. after moving the base files to thier folder the tests no longer pass.

i tried changing the _globals.js to
const requireComponent = require.context(
// Look for files in the current directory
'./base',
// Look in subdirectories
false,
// Only include "_base-" prefixed .vue files
/_base-[\w-]+.vue$/
)

Getting Started - missing 'npm install' step

Getting Started is missing npm install

Vuetify integration - [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Hi
Not an issue but rather a question.

Do you have an idea why the test returns this error

` dashboard git:(master) ✗ git commit -m "added donut chart"

running pre-commit hook: PRE_COMMIT=true lint-staged
❯ Running tasks for *.{js,jsx}
✔ eslint --fix
✔ prettier --write
✔ git add
✖ jest --bail --findRelatedTests
→ at
✔ Running tasks for *.json
❯ Running tasks for *.vue
✔ eslint --fix
✔ stylelint --fix
✔ prettier --write
✔ git add
✖ jest --no-cache --bail --findRelatedTests
→ at
↓ Running tasks for *.scss [skipped]
→ No staged files match *.scss
↓ Running tasks for *.md [skipped]
→ No staged files match *.md
↓ Running tasks for *.{png,jpeg,jpg,gif,svg} [skipped]
→ No staged files match *.{png,jpeg,jpg,gif,svg}
✖ jest --bail --findRelatedTests found some errors. Please fix them and try committing again.

         FAIL  src/router/views/home.unit.js

● Console

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

● @views/home › renders an element

expect(string).toContain(value)

Expected string:
"Welcome to the site Lorem ipsum dolor sit amet, pri veniam forensibus id. Vis maluisset molestiae id, ad semper lobortis cum. At impetus detraxit incorrupte usu, repudiare assueverit ex eum, ne nam essent vocent admodum. "
To contain value:
"Home Page"

   8 |   it('renders an element', () => {
   9 |     const { element } = mountShallowView(Home)
> 10 |     expect(element.textContent).toContain('Home Page')
  11 |   })
  12 | })
  13 |

  at Object.<anonymous> (src/router/views/home.unit.js:10:33)

Test Suites: 1 failed, 1 of 5 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 0 total
Time: 1.963s
Ran all test suites related to files matching //home/rodwin/Code/tkl_ads/dashboard/src/components/DonutChart.unit.js|/home/rodwin/Code/tkl_ads/dashboard/src/components/DonutChart.js/i.
events.js:112
throw er; // Unhandled 'error' event
^

Error [ERR_IPC_CHANNEL_CLOSED]: Channel closed
at process.target.send (internal/child_process.js:596:16)
at reportSuccess (/home/rodwin/Code/tkl_ads/dashboard/node_modules/jest-worker/build/child.js:57:11)
at
✖ jest --no-cache --bail --findRelatedTests found some errors. Please fix them and try committing again.

[vue-jest]: Sass, Less and PostCSS are not currently compiled by vue-jest

FAIL src/router/views/login.unit.js
● Console

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  (found in <Root>)

● @views/login › displays an error after failed login`

Thanks in advance.

@import '~@design' error in src/components/_base-input.vue

I did yarn upgrade and I get this error if file src/components/_base-input.vue.

@import '@design'; does no cause an error, @import '~@design'; does.

Understanding the choice of Cypress for e2e testing

I've used nightwatch in my past e2e testing fairly successfully. Cypress seems like a very user friendly and pretty alternative, but it also will add a cost to the testing stack - looks like $99 once they launch pricing.

I just wanted to understand the choice of Cypress for e2e testing and how to best leverage it.

Invoking generator for vue-cli-plugin-i18n, vue-cli-plugin-django error (esprima)

Hi,

I cannot install and invoke vue-cli-plugin-i18n (and vue-django) neither with Vue-cli (3.rc3) and not with VueUI.
Tested on two computers (both: win10 home x64, node 8.10.0, npm 6.1.0, yarn 1.7.0).

I have ongoing project based on vue-enterprise-boilerplate but same thing happens when freshly install vue-enterprise-boilerplate.

I tested another template, https://vuejs-templates.github.io/webpack/ installing it by Vue CLI or by clonning, adding plugins works fine.

Steps to reproduce
Install vue-enterprise-boilerplate first then
vue add i18n

What is expected?

📦  Installing vue-cli-plugin-i18n...

yarn add v1.7.0
[1/5] Validating package.json...
[2/5] , [3/5] Fetching packages..., [4/5] ..., [5/5] Building fresh packages...
.......... truncated
info All dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 34.04s.

✔  Successfully installed plugin: vue-cli-plugin-i18n

? The locale of project localization. en
? The locale of project fallback localization. en
? Enable locale messages in Single file components ? No

🚀  Invoking generator for vue-cli-plugin-i18n...

What is actually happening?
After invoking I get error:

🚀  Invoking generator for vue-cli-plugin-i18n...
 ERROR  Error: Line 31: Unexpected token ...
Error: Line 31: Unexpected token ...
    at ErrorHandler.constructError (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:5004:22)
    at ErrorHandler.createError (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:5020:27)
    at JSXParser.Parser.unexpectedTokenError (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:1985:39)
    at JSXParser.Parser.throwUnexpectedToken (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:1995:21)
    at JSXParser.Parser.parseObjectPropertyKey (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2492:33)
    at JSXParser.Parser.parseObjectProperty (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2527:25)
    at JSXParser.Parser.parseObjectInitializer (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2595:35)
    at JSXParser.Parser.inheritCoverGrammar (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2278:37)
    at JSXParser.Parser.parsePrimaryExpression (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:2347:38)
    at JSXParser.parsePrimaryExpression (C:\Users\davor\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\esprima\dist\esprima.js:466:97)

Maybe will help: vue-cli-plugin-vuex-module-generator works fine when invoked

Unit tests fail (without changes to repo)

First time running the project. Cloned, npm install'd, and tried a few commands. npm run build and npm run dev both seemed to work, but npm run unit fails with

Jest Encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Complaining about JSX return <div>...</div>

Babel isn't running correctly I guess, based on the error message? Even though the babelrc.js file is unchanged?

Unsure how to move forward.

Jest can't find SVG used with `require`

Hello! Firstly, thanks for this boilerplate. I'm relatively new to Vue, and I'm learning a ton of good patterns and conventions from it.

I'm having trouble with Jest not finding a an SVG I'm using in a component:

<inline-branded-svg :src="require('@/assets/generic.svg')" />

The reason I'm using the require is to alter the content of the SVG within the component, and it renders perfectly fine in the browser. However, when I run the Jest unit test for the component, it can't resolve my image:

[Vue warn]: Error in render: "Error: Cannot find module '@/assets/generic.svg' from 'nav-bar.vue'"

 (found in <Root>)
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      { Error: Cannot find module '@/assets/generic.svg' from 'nav-bar.vue'
          at Resolver.resolveModule (/repo/node_modules/jest-resolve/build/index.js:210:17)
          at Resolver._getVirtualMockPath (/repo/node_modules/jest-resolve/build/index.js:327:16)
          at Resolver._getAbsolutPath (/repo/node_modules/jest-resolve/build/index.js:313:14)
          at Resolver.getModuleID (/repo/node_modules/jest-resolve/build/index.js:290:31)
          at Runtime._shouldMock (/repo/node_modules/jest-runtime/build/index.js:701:37)
          at Runtime.requireModuleOrMock (/repo/node_modules/jest-runtime/build/index.js:457:14)
          at Proxy.render (/repo/src/components/nav-bar.vue:56:747)
          at VueComponent.Vue._render (/repo/node_modules/vue/dist/vue.runtime.common.js:4542:22)
          at VueComponent.updateComponent (/repo/node_modules/vue/dist/vue.runtime.common.js:2786:21)
          at Watcher.get (/repo/node_modules/vue/dist/vue.runtime.common.js:3140:25) code: 'MODULE_NOT_FOUND' }

  ● @components/nav-bar › displays the user's name in the profile link

I'm not sure if this is a config issue, or if this is even the right place to post this, but any help would be fantastic. :)

Teach how stubbing vue-i18n directives,filters,mixins

Or anything that isn't a build dependency, but would be at usage time.

When creating our own component library, some components might be heavily leveraging render functions and some spots might become arguments passed to v-t="foo" directive {{ $t(foo) }} or {{ foo|translate }}.

vue-i18n docs doesn't show examples of stubbing (I shall link to respective project, of course).

Question might be better as a Vue.js documentation use-case for Vue inject feature, but when creating a library that will be imported as dependency but won't require i18n in its build steps.

Thank you for considering.

Problems with Visual Studio Code Format Plugin

The 'formatOnSave' setting seems to be causing issues if the Visual Studio Code Format plugin is installed. The issue is probably with that plugin, judging by the reviews/comments left over there, but if someone is using that plugin, .vue files get corrupted when saving in this project.

Might be good to at least indicate the setting and how to disable it.

Mentions of polyfill.io are redundant

Now that the project has upgraded to use modern mode, polyfill.io related code has been removed, these paragraphs in the documentation are no longer necessary:

• https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/docs/tech.md#polyfills
• https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/docs/tech.md#javascript-faq (the second question)

Why use so many parameters when creating command 'unit'?

The best way to run jest unit tests is yarn unit.
It will run vue-cli-service test:unit \\.unit\\.js$.
Why filter again on \\.unit\\.js$? The jest.config.js testMatch param seems to be the same.

What am I missing?

If we remove the filter here, it allows users to do the classic

yarn unit button

very useful to run a subset of the tests instead of the whole suite.

Thank you for your answers.

Keeping up with dependencies

Any thoughts as to how one might keep up with dependencies, once the boilerplate is applied to a project? I am using it in a production app, but would love to keep it as close to in-sync with what you have here, especially the fixes and improvements!

recommended way of handling css (like bootstrap etc)

Is there a recommended best practice for this? I've imported it in the main.js file before like this:

import 'bootstrap/dist/css/bootstrap.css'
import 'vue-notifyjs/themes/default.scss'
import './assets/sass/light-bootstrap-dashboard.scss'
import './assets/sass/application.scss'
import './pollyfills'

I see you import your design variables in each style tag, but what about overall css like bootstrap, global application stuff etc?