[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 }) }