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

Posted 2020-09-29 Answer1215

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