[Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

Install:

npm install -g vue-cli

Init project:

vue init nuxt/starter .

Run:

npm run dev

Create a index.js file inside store folder:

import Vuex from 'vuex'

const store = () => new Vuex.Store({
state: {
counter: 0
}
})

export default store

Display the counter inside pages/index.vue:

<template>
<div>
Counter: {{counter}}
</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
computed: mapState({
counter: (state) => state.counter
})
}
</script>

mapState: return a state tree object.

We can also write:

computed: {
...mapState({
counter: (state) => state.counter
})
}