wemake-services / wemake-vue-template

Bleeding edge vue template focused on code quality and developer happiness.

wemake-vue-template

Bleeding edge vue template focused on code quality and developer happiness.

---

This project is used to scaffold new Vue project structure.

Demo

https://wemake-vue-demo.herokuapp.com/

Features

• Proven to work on both small and large scale projects
• Always up-to-date with the help of @dependabot
• Latest nuxt for server-side rendering
• Full typescript support, including Vue's SFC, Vuex, and tests
• Tools to write business logics including: DI, IoC, runtime type validation
• Linting with eslint + stylelint
• jest for unit tests and testcafe for end-to-end testing
• docker optional support for development, testing, and production
• Gitlab CI with full test and deploy pipeline configured by default
• Meaningful docs, covering almost every aspect of the project, including jsdoc annotations
• Full vscode support and list of suggested settings and plugins
• Easy update process, so your template will always be up-to-date

Requirements

You will need:

• node (see template/.nvmrc)

Installation

git clone https://github.com/wemake-services/wemake-vue-template.git
npx vue-cli init ./wemake-vue-template your_vue_project

We are required to clone the project, since we need the .git folder.

Where to go next

Before going any further make sure that you have read the docs.

Who is using this template?

If you use our template, please add yourself or your company in the list.

We offer free email support for anyone who is using this. If you have any problems or questions, drop us a line at [email protected]. And we will try to help you.

License

MIT.

wemake-vue-template's Issues

Make compatible with vue-cli

Add asyncData example

`yarn build` is missing css-files for client-side rendering

Add .env

Unmet dependency "request"

warning "jest > jest-cli > jest-environment-jsdom > jsdom > request-promise-native > [email protected]" has unmet peer dependency "request@^2.34".

Add vuex strict mode

Add note about dependencies security

Add vue-meta

https://github.com/declandewet/vue-meta

Missing polyfills import in client-entry.js

Fix stylelint rules

Analyze bundle size with webpack

Add concrete actions and mutations

Right now there's a problem with actions and mutations. They are executed with strings.
And I want flow to check types of these actions.

We need something similar to https://github.com/istrib/vuex-typescript

Add .gitlab-ci.yml

Add flow types

Add Vagrant for IE testing

Make sure FrontendChecklist is followed

https://github.com/thedaviddias/Front-End-Checklist

Consider adding PWA tools

Like https://github.com/NekR/offline-plugin

Add docs

Add integration tests

Optimize webpack build

For:

• js with new webpack features and 3rd party plugins such as babili
• css with post-css modules

Copy required files from h5bp

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Sync with django template

Things to sync:

• gitlab ci
• docker-compose
• readme
• template version link

Add immutability support

Add a way to declare some variables as immutable.

Consider removing nvm

There are different tools to manage node versions.

Analyze unused dependencies

depcheck/depcheck#195

Lint server

Lint vue templates

Improve scss workflow

With:

• scss-lint
• https://github.com/shakacode/sass-resources-loader

Handle custom env vars in webpack

Add husky

Integrate greenkeeper

https://greenkeeper.io/

Server is running at http://undefined:undefined

Following your default instructions, trying to run the dev server using yarn dev gives me this:

Server is running at http://undefined:undefined

Then I tried yarn build followed by yarn start which results in

@connexo > yarn start
yarn run v1.3.2
$ cross-env NODE_ENV=production node server
server started at http://undefined:undefined

In both cases I tried http://localhost:8080 but no success. Which port is your default port?

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Make `yarn check` a required step

Improve Docker support

Things to do:

• restructure (add more files into docker/ folder)
• add docker for development as default
• add docker-compose.prod.yml
• add ci.sh

Add Caddy

Add image-optimization webpack plugin

Add snapshot testing

Exclude e2e reports from git

Missing .env on the initial startup

We need to update the docs to copy it.

Add async component example

Use `client` prefix for all packages

This influences how eslint import order works.
That's that generally more obvious.

Enforce eslint imports order

https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md

Make sure VueComponent styleguide is followed

https://github.com/pablohpsilva/vuejs-component-style-guide

Configure eslint to be stricter

We need several rules to be in place:

    "prefer-arrow-callback": 2,
    "func-style": [2, "declaration"],
    "no-var": 2,

Maybe there are other rules to make the development process consistent.

Add gz files by default

Add commitizen

But search for proper commit template.

Sometimes scopes are really annoying.
And not informative.

Set max line length

Add security checks for dependencies