Professional Documents
Culture Documents
Vue Js Cheatsheet
Vue Js Cheatsheet
of Contents
Introduction 1.1
Project Initialization 1.2
Using TypeScript 1.3
Linting 1.4
Navigation Using Router 1.5
Application State 1.6
Forms 1.7
I18n & I10n 1.8
Testing 1.9
1
Introduction
Vue.js Introduction
Vue.js is a progressive framework for building user interfaces. Unlike other
monolithic frameworks, Vue is designed from the ground up to be incrementally
adoptable.
This book intends to help developers write Vue.js applications easy and fast. The
book explains best practices and general development flows.
2
Project Initialization
Project Initialization
Getting Started
We take advantage of the vue-cli to initialize the project.
This will initialize a new Vue.js application with support for server-side rendering
and hot module reload in development.
Development
It is highly recommended to use Nodemon in development. It will restart you
application when the server-side code changes (client-side changes are already
handled by the application itself).
Production
3
Project Initialization
When you are ready to push your code in production, compile the project into the
./dist directory and set at least the env environment variable (check the
./config/index.js ).
Serving static files through Node.js in production could slow down your
application. It is recommended that you move the entire ./public directory to
CDN or you serve these files through Nginx or similar HTTP server. The
./dist/client bundles are also served as public files thus don't forget to
move them as well. In this case you'll need to configure the publicPath
configuration variable.
$ npm start
4
Using TypeScript
Using TypeScript
Although Vue.js officially provides TypeScript definition files, the framework it self
is not written using this technology and thus not 100% ready to use it for you next
big project.
If you search for a best-practice advice, then use TypeScript when writing Vue.js
plugins (weh nusing only .ts files) and JavaScript for components and your actual
projects (when using also .vue files). Currently, by using TypeScript in your Vue.js
projects you accept a risk of having serious problems and lack of support.
If you wonder how to structure your TypeScript-based Vue.js plugin then take a
look at the RawModel Vue.js Plugin.
5
Linting
Linting
Code style is important and eslint can significantly improve the way we write our
code.
Installation
Start by installing the required packages.
{
extends: ['vue'],
plugins: ['vue'],
rules: {}
}
{
"scripts": {
"lint": "eslint ./src --ext .js --ext .vue"
}
}
You can now run the npm run lint command to verify your code.
Atom
6
Linting
If you are using Atom then install the linter-eslint plugin. This will automatically
install also the linter plugin.
After installation under Preferences open the Packages tab, find the
linter-eslint plugin and click on the Settings button. Search for Lint
HTML Files option and make sure it's marked as checked. This will enable
linting in the .vue files.
7
Navigation Using Router
Vue.use(Router)
<template>
<div>./src/app/components/home.vue</div>
</template>
8
Navigation Using Router
<template>
<div>./src/app/components/foo.vue</div>
</template>
<template>
<div>./src/app/components/bar.vue</div>
</template>
<template>
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/foo">Foo</router-link></li>
<li><router-link to="/bar">Bar</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
</template>
...
import router from './router';
9
Navigation Using Router
10
Application State
Application State
Vuex is used for managing application state and it's very similar to Flux. Vuex
uses a concept of application state, getters, mutations and actions. The
application state contains variables where application data is stored,
getters are computed state variables, mutations are used for interacting
with state variables and actions are used for loading data (e.g. from a server). All
these items are registered under the global namespace.
Getting Started
Let's start by installing the dependencies.
Vue.use(Vuex);
11
Application State
...
import store from './store';
new Vue({
...
store
});
12
Application State
We now have all the ingredients for retrieving and displaying a list of users. Add
the code into one of your .vue file.
<template>
<div>
<div v-for="user in users">
{{ user.name }}
</div>
<button v-on:click="loadMore">Load</button>
</div>
</template>
<script>
export default {
computed: {
users () {
return this.$store.state.users;
}
},
methods: {
loadMore () {
this.$store.dispatch('fetchUsers');
}
}
}
</script>
13
Application State
State Hydration
Open the ./src/app/client-entry.js file and add the line below.
app.$store.replaceState(window.STATE);
Open the ./src/app/server-entry.js file and add a pre-fetch logic which will
pre-populate the components with data.
...
export default (ctx) => {
...
return Promise.all( // initialize components
app.$router.getMatchedComponents().map(c => c.prefetch ? c.p
refetch.call(app) : null)
).then(() => {
ctx.state = app.$store.state; // set initial state
}).then(() => {
return app;
});
};
page.on('end', () => {
res.write( `<script>window.STATE = JSON.parse('${JSON.stringi
fy(ctx.state)}')</script>`);
...
});
Open the component file and define the prefetch method which loads data on
the server and the beforeMount method which loads data on the client.
14
Application State
<script>
export default {
...
prefetch () {
return this.$store.dispatch('fetchUsers');
},
beforeMount () {
if (!this.$store.state.users.length) {
return this.$store.dispatch('fetchUsers');
}
}
}
</script>
15
Forms
Forms
In this chapter we create a form which inserts a new user into the Vuex store. This
chapter assumes that you've completed the previous chapter on how to manage
application state.
Getting Started
Create a new component file or open an existing one (e.g.
./src/app/components/app.vue ), then set the code as shown below.
16
Forms
<template>
<div>
<!-- Form -->
<form novalidate v-on:submit.prevent="adduser">
<input type="text" v-model="user.name" placeholder="User n
ame"/>
<input type="checkbox"v-model="user.enabled"/> Enabled
<button>+ Add User</button>
</form>
<!-- List -->
<pre v-for="user in users">{{user}}</pre>
</div>
</template>
<script>
</script>
Dynamic Inputs
17
Forms
Here we add a tags field to the user, to show how easy we can create dynamic
form fields.
<template>
<div>
<!-- Form -->
<form ...>
...
<template v-for="tag in user.tags">
<input type="text" v-model="tag.name" placeholder="User
tag"/>
</template>
<button v-on:click.prevent="newTag">+ New Tag</button>
...
</form>
</div>
</template>
<script>
export default {
data () {
return {
user: {
...
tags: [{name: ''}]
}
};
},
methods: {
...
newTag () {
this.user.tags.push({name: ''});
}
}
};
</script>
18
Forms
Validation
The simplest and the most convenient way for validating a form is to use the
RawModel.js framework. Use vue-rawmodel plugin to implement this into your
Vue application.
19
I18n & I10n
This chapter explains how to add `i18n` and `l10n` support into your Vue.js
application using vue-translated.
Getting Started
Install the dependencies.
Vue.use(VueTranslated);
20
I18n & I10n
export default {
'home.text': 'Hello {name}!'
}
export default {
number: {},
date: {},
time: {}
}
Open the application main file `./src/app/index.js` and attach the `i18n` instance.
<template>
<div>
{{ $formatMessage('home.text' {name: 'John'}) }}
</div>
</template>
Intl Support
Browsers
21
I18n & I10n
If you need to support old browsers with no support for `Intl` then you need to
include a polyfill. The easiest way is to use FT Polyfill Service. If you've follow this
book and you are using server-side rendering then open the
`./src/server/middlewares/app.js` and load the `polyfill.io` service.
exports.appServer = function () {
return (req, res) => {
...
page.on('end', () => {
res.write(`<script src="https://cdn.polyfill.io/v2/polyfil
l.min.js?features=Intl.~locale.en"></script>`);
...
});
...
};
};
Node.js
Node.js already supports `Intl` out of the box but it comes with English support
only. To support other languages we need to download the latest ICU data file and
then run our scripts with the `--icu-data-dir` option.
Open the `./package.json` file and update your `node` scripts by adding the `--icu-
data-dir` option.
22
I18n & I10n
{
"scripts": {
...
"start": "node --harmony --icu-data-dir=node_modules/icu4c-d
ata ./scripts/start"
},
}
23
Testing
Testing
This tutorial explains how to implement the webdriver testing utility to your
Vue.js application.
Getting Started
If you don't have a Vue.js , then clone the vue-example.
Installation
Install the required packages.
24
Testing
$ ./node_modules/.bin/wdio config
* Where do you want to execute your tests?
> On my local machine
* Which framework do you want to use?
> mocha
* Shall I install the framework adapter for you?
> Yes
* Where are your test specs located?
> ./tests/**/*.js
* Which reporter do you want to use spec?
> spec
* Shall I install the reporter library for you?
> Yes
* Do you want to add a service to your test setup sauce?
> selenium-standalone
* Shall I install the services for you?
> Yes
* Level of logging verbosity?
> silent
* In which directory should screenshots gets saved if a command
fails?
> ./wdio/shots/
* What is the base url?
> http://localhost:3000
Add the wdio and hs_err_pid* keys to your .gitignore . If you are using
nodemon.json then also add these keys under ignore .
Open the ./package.json file and add the npm test command.
{
"scripts": {
"test": "wdio wdio.conf.js"
},
}
25
Testing
describe('foo', () => {
it('should be true', () => {
assert.equal(true, true);
});
});
You can now run your test by executing the npm test command.
Linting Support
If you are using eslint, you'll need to register a plugin tu support mocha which we
selected while generating the configuration file.
Then open the .eslintrc and reconfigure the file as shown below.
module.exports = {
plugins: ['mocha'],
env: {
mocha: true
},
globals: {
browser: false
},
rules: {
'mocha/no-exclusive-tests': 'error'
}
}
Testing Application
26
Testing
Our first test doesn't do much so let's replace it with something useful. The code
below navigates to the home page and checks for a valid page title.
describe('/', () => {
it('should have title', () => {
browser.url('/');
assert.equal(browser.getTitle(), 'Example');
});
});
If we execute the npm test command, the test will fail because the application
is not started. We can start the application manually, we can also use concurrently
for starting the npm command but even better solution is to create a custom script
for that.
Create a new file ./scripts/test.js and write a script which starts the
application first and then runs the tests.
process.env.NODE_ENV = 'production';
(async () => {
// starting your application
...
// running tests
spawn('./node_modules/.bin/wdio', ['./wdio.conf.js'], {stdio:
'inherit'})
.on('close', (code) => app.close())
.on('close', (code) => process.exit(code));
})()
.catch((error) => {
throw error;
});
27
Testing
{
"scripts": {
"test": "node --harmony ./scripts/test.js"
},
}
Open the ./wdio.conf.js file and the code below at the bottom of the
configuration file.
exports.config = Object.assign(exports.config, {
user: '{saucelabs-username}',
key: '{saucelabs-access-key}',
capabilities: [
{browserName: 'firefox', build: version},
{browserName: 'chrome', build: version},
],
services: ['sauce'],
sauceConnect: true,
protocol: 'http',
port: 80
});
The npm test command will now run tests using sauce service. Use the
Platform Configurator for generating additional capabilities . Don't forget to
adding the build option to each capability to group tests and display them
under the Automated Builds tab in your Sauselabs account.
28
Testing
Continuous Deployment
If the test process works on your local machine, then it will work in cloud.
CircleCI is one of the popular continuous integration platforms which we will use
here.
machine:
node:
version: 6 # until https://github.com/laverdet/node-fibers/i
ssues/321 is resolved
dependencies:
override:
- NODE_ENV=development npm install
Push your code to Github or Bitbucket repository then navigate to circleci.com and
connect your repository. Tests will now be automatically run every time you push
an update to that repository.
Note that you can use the process.env.CI variable to check if tests are run in
cloud.
29