Notepad in Nuxt using Vue 2.0

components_note.vue

<template>
  <li>
    <div class="box">
      <div class="content">
        <div class="editable">
          <input type="text" class="input" v-model="imessage" @keyup="$emit('edit', index, imessage)">
        </div>
      </div>
      <nav class="level is-mobile">
        <div class="level-left">
          <a class="level-item">
            <span class="icon is-small has-text-danger">
              <i class="fa fa-trash-o" @click="$emit('remove', index)"></i>
            </span>
          </a>
        </div>
      </nav>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    index: { required: true },
    message: { required: true }
  },
  data() {
    return {
      imessage: this.message
    }
  }
}
</script>

nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'ToDo App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'ToDo App' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css' },
      { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend(config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

package.json

{
  "name": "ntemplate",
  "version": "1.0.0",
  "description": "ToDo App",
  "author": "Joseph Spurrier",
  "private": true,
  "scripts": {
    "dev": "PORT=8080 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^1.0.0-rc11",
    "shortid": "^2.2.8"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.3.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6"
  }
}

pages_notepad.vue

<template>
  <section class="section">
    <div class="container">
      <div>
        <nuxt-link to="/">Back to home</nuxt-link>
      </div>

      <div class="box">

        <div class="field">
          <label class="label">To Do</label>
          <div class="control">
            <input id="inputTodo" class="input" type="text" placeholder="What would you like to do?" @keydown.enter="handleAdd">
          </div>
        </div>

      </div>
      <div>
        <ul id="listTodo">
          <li is="Note" v-for="(v, k) in TodoList.list" :key="v.id" :index="k" :message="v.message" @remove="handleDelete" @edit="handleUpdate"></li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
import Note from '~/components/note.vue';
import shortid from 'shortid';

export default {
  components: {
    Note
  },
  data() {
    return {
      TodoList: {
        STORAGE_KEY: 'todos-vuejs-2.0',
        list: [],
        saveItems: function() {
          localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.list));
        },
        loadItems: function() {
          this.list = JSON.parse(localStorage.getItem(this.STORAGE_KEY) || '[]');
          console.log('Loaded items:', this.list.length);
        },
        addItem: function() {
          let inputTodo = document.getElementById('inputTodo');
          this.list.push({ id: shortid.generate(), message: inputTodo.value });
          inputTodo.value = '';
          this.saveItems();
        },
        deleteItem: function(position) {
          this.list.splice(position, 1);
          this.saveItems();
        },
        updateItem: function(position, text) {
          this.list[position].message = text;
          this.saveItems();
        }
      }
    }
  },
  methods: {
    handleAdd() {
      this.TodoList.addItem();
    },
    handleUpdate(id, text) {
      this.TodoList.updateItem(id, text);
    },
    handleDelete(id) {
      this.TodoList.deleteItem(id);
    }
  },
  mounted() {
    this.TodoList.loadItems();
  }
}
</script>