Nuxt.js+Vuetify+localStorageにてTODOを作る【下準備】

概要

タイトルの通りです。
localStorageを使えば、ログイン機能を使わずに簡単なTODOを使えます。
最低限の機能のみ書きます。

前提

• localStorageを使える
• Nuxt.jsを使える
• Nuxt.js,Vue.jsにある程度の知識がある。
• Vuetifyを使う

まず最初に

index.vue

<template>
  <v-container></v-container>
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {};
  },
};
</script>

今回のメインページとなる、index.vueを以下のように変えてください。
v-containerの中に色々と書いていきます。
v-containerは普通のdivでも構いませんが、v-containerの方が見やすいです。

そして、最終的には以下のようにコードを編集します。
index.vue

<template>
  <v-container>
    <div class="max800">
      <v-row>
        <v-col cols="9">
          <v-text-field v-model="text" label="タスク"></v-text-field>
        </v-col>
        <v-col cols="3">
          <v-btn color="primary" block> 追加 </v-btn>
        </v-col>
      </v-row>

      <ul>
        <li v-for="list in task">
          <v-row>
            <v-col cols="9">
              {{ list }}
            </v-col>
            <v-col cols="3">
              <v-btn color="error" block>削除</v-btn>
            </v-col>
          </v-row>
        </li>
      </ul>
    </div>
  </v-container>
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {
      text: "",
      task: [],
    };
  },
};
</script>

<style>
.max800 {
  max-width: 800px;
  margin: 0 auto;
}
</style>

試しにdataの配列「task」に適当な値を入れればこうなるはずです。
※画像のは「task:["テキスト","テスト"]と入れた場合」


これで下準備は完了です。
次回からTODOについて書いていきます。