「nuxt.js」ライブラリvue-contextをインストールしてコンテキストメニューを作成する
環境
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
create-nuxt-app v4.0.0
? 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.0Generating 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.
>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を作成します
以下の内容を編集します
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に下記のコードを追加します
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を下記のコードを編集します
<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を起動します
>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にアクセスします。
画面に文字「マウスを右クリックしてメニューを選択します」が表示されます。
文字をを右クリックするとコンテキストメニュー「更新、削除」が表示されていることが確認できます。
画面に文字「マウスを右クリックしてメニューを選択します」が表示されます。
文字をを右クリックするとコンテキストメニュー「更新、削除」が表示されていることが確認できます。
画面に文字「マウスを右クリックしてメニューを選択します」が表示されます。 文字をを右クリックするとコンテキストメニュー「更新、削除」が表示されていることが確認できます。