vue-land/create-vue-app

Create Vue apps with no build configuration.

create-vue-app

Features

• No config until you need, thanks to Poi.
  • Support all CSS preprocessors and CSS modules
  • Hot mode reloading
• Unit tests with Jest with no config by default thanks to Tyu.
• Progressive Web App by default, thanks to poi-preset-offline and offline-plugin.

Install

yarn global add create-vue-app

Usage

# Generate project in cwd
mkdir my-vue-app && cd my-vue-app
create-vue-app .

# Generate project in specific folder
create-vue-app my-vue-app
cd my-vue-app

Alternatively, if you have Yarn^0.24, you can use the yarn create command:

yarn create vue-app my-vue-app

Folder structure

.
├── README.md
├── index.ejs
├── package.json
├── poi.config.js
├── src
│   ├── components
│   │   ├── App.test.js
│   │   └── App.vue
│   ├── index.js
│   └── polyfills.js
├── static
│   └── favicon.ico
└── yarn.lock

Recipes

• Unit Test

FAQ

Where are the docs?

This project is using Poi under the hood, so for most questions, hopefully go to this page and you will get the answer.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

create-vue-app © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @_egoistlily

create-vue-app's Issues

Test with jest and vue-test-utils

Integrate with Cypress for e2e tests

https://www.cypress.io/

--type=web ??

In the example we see --type=web. Are there any other types supported?

I think this should be added to the docs.

ava tests don't work with module import path contains "@/pathname" which is supported by poi

One of the things I like about Poi, is a feature to use @ to target the source root in module imports.

Example:

@/store/mutation-types

instead of

../../../store/mutation-types

but AVA tests cannot resolve paths with @ in them because its web-pack specific. Is there a work around for it?

might switch to https://github.com/egoist/tyu for testing if its too much trouble to make ava work. tyu has the right configuration in jest wrapper.

    moduleNameMapper: {
      '^@/(.*)$': '<rootDir>/src/$1'
    }

Syntax error when creating new app

I run this command
ag_systems:~/workspace $ create-vue-app my-app
I got this error

/home/ubuntu/workspace/node_modules/create-vue-app/bin/init.js:23
    const {overWrite} = yield inquirer.prompt([{
          ^

SyntaxError: Unexpected token {
    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 Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/ubuntu/workspace/node_modules/create-vue-app/bin/cva.js:23:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10) ```

Spelling error

Environment: Windows 10 with yarn 1.16.0 & [email protected]
Describe:
Using create-vue-app, it show "descirpe" instead "describe" while asking some package-lock.json information
Error Reproduction: $yarn create vue-app myapp

How to pass env variables to vue application?

Hi. I need to pass api url to vue application for vue-resource .
I tried --env.VARIABLE_NAME xxx and VARIABLE_NAME=xxx yarn dev but nothing works.

minimum node version error message

i had accidentally started it under node 5.x and received the following error. a minimum major version check would be nice :)

would love to send a pull request, but have no idea where to start...

/usr/local/lib/node_modules/create-vue-app/bin/init.js:23
    const {overWrite} = yield inquirer.prompt([{
          ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/create-vue-app/bin/cva.js:23:1)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)

Please add support for TypeScript

Core new feature of Vue 2.5

https://medium.com/the-vue-point/vue-2-5-released-14bd65bf030b

Replace vbuild with vue-scripts

I want to make create-vue-app act like create-react-appwhich:

• needs no config but using env variables
• is not extensible, you can't modify webpack config

We might also provide a vue-scripts eject command just like what react-scripts eject does

win7 cmd create error;

system:win7;
error:The filename, directory name, or volume slogan method is not correct.

Testing with async/await!?

Been using create-vue-app for my first project. Complained about imports in my tests and then async/await which are pretty standard for my ava testing workflows.

import test from 'ava'

test('create environment', async t => {
  // ...
  t.pass()
})

$ ava test/services/environment/create-env.test.js
/Users/kristianmandrup/repos/tecla5/red-forms/test/services/environment/create-env.test.js:1
(function (exports, require, module, __filename, __dirname) { import _regeneratorRuntime from 'babel-runtime/regenerator';
^^^^^^
SyntaxError: Unexpected token import

But looking at [vue-app](https://www.npmjs.com/package/babel-preset-vue-app) preset it should have all I need included!?

I got rid off the error my patching the `package.json` configuration as follows: 

"babel": {
"presets": [
"env"
],
"plugins": [
"transform-runtime"
]
},
"ava": {
"babel": "inherit",
"require": [
"./test/helpers/setup.js",
"babel-register",
"babel-polyfill"
]
},

Now the unit test [recipe](https://github.com/avajs/ava/blob/master/docs/recipes/vue.md) seems to be "turned off"?

I guess overriding with "env" preset kills it?

"presets": [
  "env"
],

Please advice on how to best setup ava testing with working async/await and imports without screwing with the default setup. Now my fetch API is also complaining that `Headers` are not defined, ie. that the `browser-env` is switched off.

Thanks :)

Upgrade to poi 10.x

Is this still the preferred way to start a new vue project with poi? If so can you please update the package to use 10.x because this no longer works due to all the breaking changes from 9 -> 10

create-vue-app vs vue-cli

Hi, how does this tool compare, and does it make sense to use it when there is vue-cli / sao?

.gitignore?

Should create-vue-app generate .gitignore file automatically?

Missing babel-preset-vue-app

Booting a new app created using create-vue-app fails with the following error:

missing babel preset: following babel preset is not found in ~/tmp/myvueapp:

- babel-preset-vue-app

I believe it is caused by this commit: egoist/poi@813e6b3

An unexpected error occurred: "Invalid Version: next"

What happend... 😂

create-vue-app compiled with warnings

i've follow instruction create-vue-app based on readme. then error like following image

Creating custom html output.

Using vbuild we could change html output in html-webpack-plugin options according to docs.
Do we have such ability with create-vue-app?

In my case I need to add some google fonts for Material Design.

Set up karma test

Consider merging template-vue into this repo

Maybe use lerna to manage create-vue-app & template-vue & potential related packages in the future