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

環境

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Windows 10 Home 64bt
node v14.18.3
npm 6.14.15
yarn 1.22.17
Windows 10 Home 64bt node v14.18.3 npm 6.14.15 yarn 1.22.17
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
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
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のインストール

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
>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.
>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.
>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を作成します
以下の内容を編集します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import Vue from 'vue'
import VueContext from 'vue-context'
import 'vue-context/dist/css/vue-context.css'
Vue.component('vue-context', VueContext)
import Vue from 'vue' import VueContext from 'vue-context' import 'vue-context/dist/css/vue-context.css' Vue.component('vue-context', VueContext)
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に下記のコードを追加します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
plugins: [
{
src: '@/plugins/plugin',
mode: 'client'
}
],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
plugins: [ { src: '@/plugins/plugin', mode: 'client' } ], // Build Configuration: https://go.nuxtjs.dev/config-build build: { }
plugins: [
    {
      src: '@/plugins/plugin',
      mode: 'client'
    }
  ],
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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を起動します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
>yarn dev
$ nuxt
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
>yarn dev $ nuxt ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.8 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯
>yarn dev
$ nuxt

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
画面に文字「マウスを右クリックしてメニューを選択します」が表示されます。
文字をを右クリックするとコンテキストメニュー「更新、削除」が表示されていることが確認できます。
画面に文字「マウスを右クリックしてメニューを選択します」が表示されます。 文字をを右クリックするとコンテキストメニュー「更新、削除」が表示されていることが確認できます。
画面に文字「マウスを右クリックしてメニューを選択します」が表示されます。
文字をを右クリックするとコンテキストメニュー「更新、削除」が表示されていることが確認できます。

 

Nuxt.js

Posted by arkgame