Mobx NuxtJS Vue Example

Nuxt.js is a minimal framework for creating Vue.js applications with server side rendering, code-splitting, hot-reloading, static generation and more!

This Nuxt.js project showing integration of Mobx as an alternative for state-management in your vuejs applications. A simple two tabbed application which renders a filtered list of products, “socks” and “shoes”. When clicked they are added to the cart.

The cart is accessed by clicking on the cart button and it lists the items in the cart and the total cost. Items are deleted from the cart by clicking on them.

What I found amazing about Nuxt was how easy it was to get started, just start creating components in the pages directory, no worrying about routing and it just works!!

Added Mobx

MobX is a battle tested, simple and scalable state management library transparently applying functional reactive programming (TFRP). The Mobx design principle is very simple:

Anything that can be derived from the application state, should be derived. Automatically.

https://github.com/mobxjs/mobx

yarn add mobx-vue mobx

Added the store.js file to a new folder created called services, will need to import the store in the index.vue file

import Vue from 'vue'
import { Store } from '../services/store'
import { Observer, observer } from 'mobx-vue'

const store = new Store()
Vue.prototype.$store = store

Added Support for Decorators

Install the appropriate plugins

yarn add -D @babel/plugin-proposal-class-properties
yarn add -D babel-plugin-transform-decorators-legacy

Update the nuxt.config.js file

/*
  ** Build configuration
  */
  build: {
    babel: {
      plugins: [
        [
          '@babel/plugin-proposal-decorators',
          {
            legacy: true
          }
        ],
        [
          '@babel/plugin-proposal-class-properties',
          {
            loose: true
          }
        ]
      ]
    },

Using Vuetify

Vuetify is developed exactly according to Material Design spec. Every component is hand crafted to bring you the best possible UI tools to your next great app. The development doesn’t stop at the core components outlined in Google’s spec. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy.

Configured the plugin to support Vuetify in the file plugins/vuetify.js

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: "#26A69A",
    secondary: "#26A69A",
    accent: "#00796B",
    error: "#f44336",
    warning: "#ffeb3b",
    info: "#2196f3",
    success: "#004D40"
  }
})

Setup my default.vue in the layouts folder

<template>
  <v-app>
    <nuxt />
  </v-app>
</template>

https://vuetifyjs.com/en/

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

See the full source code of the application here, https://github.com/aaronksaunders/mobx-nuxt-example