Vue3 ライブラリ「vue3-router-tree」を使用してツリービューを実装する

作成日 2021.10.23
Vue.js
Vue3, ライブラリ

ライブラリ「vue3-router-tree」を使用して、ツリービューを実装することが可能です。ここでは、vue3-router-treeを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. Vue3環境構築
3. vue3-router-treeインストール
4. vue3-router-tree使い方
5. 起動

環境

OS windows10 64bit
vue 3.0.0
node v14.6.0
yarn 1.22.10
@vue/cli 4.5.9

Vue3環境をwindowsに構築する

Vue3環境構築

vue-cliを使用して構築してます。

npm install -g @vue/cli

npm init

vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

cd vueapp

vue3-router-treeインストール

yarnを使用して、インストールします。

yarn add vue3-router-tree

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

npm install -g yarn

vue3-router-tree使い方

src配下のApp.vueを下記のように編集します。

<template>
  <div class="container">
    <vue3-router-tree :items="routes"> </vue3-router-tree>
  </div>
</template>

<script>
import { defineComponent } from "vue";

import Vue3RouterTree from "vue3-router-tree";
export default defineComponent({
  name: "App",
  components: {
    Vue3RouterTree,
  },
  data() {
    return {
      routes: [
        {
          path: "/",
          name: "Home",
          hasIcon: true,
        },
        {
          path: "/dashboard",
          name: "Dashboard",
          hasIcon: true,
        },
        {
          path: "/component",
          name: "Components",
          hasIcon: true,
          children: [
            {
              path: "/alerts",
              name: "Alerts",
            },
            {
              path: "/avatars",
              name: "Avatars",
            },
            {
              path: "/buttons",
              name: "Buttons",
            },
            {
              path: "/forms",
              name: "Forms",
              children: [
                {
                  path: "/autocompletes",
                  name: "Autocompletes",
                },
                {
                  path: "/checkboxes",
                  name: "Checkboxes",
                },
              ],
            },
          ],
        },
      ],
    };
  },
});
</script>
<style>
.container {
  margin: 0 auto;
  margin-top: 200px;
  min-height: 100vh;
  width: 500px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>