「nuxt.js」ライブラリvue-contextをインストールしてコンテキストメニューを作成する

2022年7月18日

環境

Windows 10 Home 64bt
node v14.18.3
npm 6.14.15
yarn　1.22.17

操作方法
1.「nuxtcontext」という名前でプロジェクトを作成し
C:\study\skill\nuxt>npx create-nuxt-app nutxcontext

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in nutxcontext
? Project name: nutxcontext
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git
略
 Successfully created project nutxcontext

  To get started:

        cd nutxcontext
        yarn dev

  To build & start for production:

        cd nutxcontext
        yarn build
        yarn start

2.vue-contextをインストールします
作成したプロジェクトに移動します
>cd nutxcontext

vue-contextのインストール

>yarn add vue-context
yarn add v1.22.17
[1/4] Resolving packages...
warning vue-context@6.0.0: No longer maintained
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "nuxt > @nuxt/components@2.2.1" has unmet peer dependency "consola@*".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ vue-context@6.0.0
info All dependencies
├─ loose-envify@1.4.0
├─ vue-clickaway@2.2.2
└─ vue-context@6.0.0
Done in 34.96s.

3.pluginsフォルダ、plugin.jsを作成します
以下の内容を編集します

import Vue from 'vue'
import VueContext from 'vue-context'
import 'vue-context/dist/css/vue-context.css'
Vue.component('vue-context', VueContext)

4.プロジェクト配下にあるnuxt.config.jsに下記のコードを追加します

plugins: [
    {
      src: '@/plugins/plugin',
      mode: 'client'
    }
  ],
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }

5.pages配下にindex.vueを下記のコードを編集します

<template>
  <div class="container">
    <div>
      <div>
        <p @contextmenu.prevent="$refs.menu.open">
          マウスを右クリックしてメニューを選択します
        </p>
      </div>
      <vue-context ref="menu">
        <li>
          <a @click.prevent="onClick($event.target.innerText)">更新</a>
        </li>
        <li>
          <a @click.prevent="onClick($event.target.innerText)">削除</a>
        </li>
      </vue-context>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Nuxttest',
  methods: {
    onClick (text) {
      alert(`クリックしたのは ${text}です`)
    }
  }
}
</script>
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

5.yarnを起動します

>yarn dev
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

6.ブラウザから http://プライベートIP:3000にアクセスします。

画面に文字「マウスを右クリックしてメニューを選択します」が表示されます。
文字をを右クリックするとコンテキストメニュー「更新、削除」が表示されていることが確認できます。