Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
nuxt.js で plugins を作る
Search
mikakane
June 22, 2019
Technology
0
770
nuxt.js で plugins を作る
mikakane
June 22, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
1
1.3k
コーディングがわからない
mikakane
0
130
Web制作現場のディレクションを支えるGitHub
mikakane
0
540
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.9k
Laravel Package Development
mikakane
16
6.4k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
2.1k
フロントエンドで作る理由
mikakane
1
1.2k
Firebase で作る Web アプリケーション
mikakane
1
150
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
690
Other Decks in Technology
See All in Technology
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
260
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
230
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Designing for humans not robots
tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
A better future with KSS
kneath
239
17k
A Tale of Four Properties
chriscoyier
160
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Done Done
chrislema
184
16k
Building Adaptive Systems
keathley
43
2.6k
The Invisible Side of Design
smashingmag
299
51k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Optimizing for Happiness
mojombo
379
70k
Transcript
chatbox.inc 後藤 知宏 Nuxt.js で plugin を作る
chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :
@_mikakane エンジニア / 技術顧問
chatbox.inc Nuxt.js Plugins Vue.js の plugins とはちょっと違う、Nuxt.js 独自の機能 https:/ /ja.nuxtjs.org/guide/plugins
chatbox.inc Nuxt.js Plugins Vue.js の plugins とはちょっと違う、Nuxt.js 独自の機能 Nuxt.js では
JavaScript プラグインを定義することができ、それはルートの Vue.js アプリケーション がインスタンス化される前に実行されます。この機能は、自前のライブラリや外部のモジュールを使 用する際にとりわけ有用です。
chatbox.inc sample plugin import Vue from 'vue' import SomePlugins from
‘some-vue-plugins’ Vue.use(SomePlugins) export default (ctx, inject) => { // ... some code } Vue.js の Plugin 読み込みなど Vue オブジェクトへの操作 関数をexport すると処理してもらえる
chatbox.inc use plugin // nuxt.config.js export default { // ...
plugins: ['~/plugins/some-plugin.js'] // ... } 自作の Plugin は plugins フォルダに格納して、 nuxt.config.js から読み込ませてロードすることができる。
chatbox.inc use plugin only in browser // nuxt.config.js export default
{ // ... plugins: [ '~/plugins/some-plugin.js', { src: '~/plugins/browser-plugin.js', ssr: false } ] } localStorage や Browser API を利用するなど、 ブラウザ側でのみ利用したい場合向けの ssr オプション
chatbox.inc Name conventional plugin export default { plugins: [ '~/plugins/foo.client.js',
// only in client side '~/plugins/bar.server.js', // only in server side '~/plugins/baz.js' // both client & server ] } ファイルの拡張子で only in client / server を自動認識させることもできる( Nuxt.js 2.4 以降。
chatbox.inc Extend Nuxt.js Nuxt.js に グローバルな機能を追加したい。 アラートやローディングなど システム全体で利用するようなもの
chatbox.inc Combined injection export default ({ store }, inject) =>
{ inject('loading', { on: () => { store.commit('loading/on') }, off: () => {store.commit('loading/off') } }) } Nuxt.js に `loading` という名前で オブジェクトを注入 引数から Nuxt.js のコンテキストにアクセスできる。
chatbox.inc use in vue component export default { async mounted(){
this.$loading.on() await this.loadUserList() this.$loading.off() } } `loader` という名前で注入したオブジェクトは、 `this.$loading` の形式で アクセスできる。
chatbox.inc use in vuex export const actions = { loadItemList
({ commit }) { this.$loader.on() // connect to REST API this.$loader.off() } } inject で注入したオブジェクトは、 Vuex Store内からもアクセスできる。
chatbox.inc Nuxt.js injection 一般的ある UI ライブラリで用いられるような Vue の prototype を操作する方法では、
Vue Compoent 内でしかその関数の恩恵が受けられない Nuxt.js 内で頻繁に登場するような共通処理を定義するのに便利 Plugin 経由で inject したオブジェクトは、 Nuxt.js の Vue Compoent から Vuex Storeまで 様々な箇所で用いることができる。
chatbox.inc 例 1 Store の操作 export default ({ store },
inject) => { inject('_loading', { on: () => { store.commit('loading/on') }, off: () => {store.commit('loading/off') } }) } 表示のON/OFF を Store で制御するタイプの UI Layout などで State をbind して v-if で表示制御
chatbox.inc 例2 コンポーネントの利用 import Vue from "vue"; import Alert from
"~/components/layout/Alert.vue" export default (ctx, inject) => { inject('_alert', { error(message){ const alert = new (Vue.extend(Alert))({ propsData: { message } }) alert.vm = alert.$mount() document.body.appendChild(alert.vm.$el) } }) }
chatbox.inc 例3 localStorage の操作 const tokenKey = "LOGINTOKEN" export default
({store}, inject) => { inject('_auth', { async user(){ if(store.state.user.user){ return store.state.user.user }else{ const token = localStorage.getItem(tokenKey) || "" const {user} = await store.dispatch("user/RELOGIN", token) return user } }, }) }
chatbox.inc コード分割のススメ Nuxt.js でのアプリケーションコーディングを、 もっとわかりやすく、もっと簡単に よりシンプルで、読みやすい Component の形を考える
chatbox.inc moduled functions Vue Component の methods や computed が荒ぶると
コードの可読性が著しく低下してくる。 単純な JS 関数はデータ処理には便利だが、 Vue のコンテキストを持っておらず不便 mixin はVue コンテキストを持った関数を注入できるが、 名前の衝突が不安 store の map は便利だが技術的なコンテキストが強い。
chatbox.inc Nuxt.js Injection inject を利用することで特定の処理系を分離 Vue Component は 注入名と操作方法のみを 知っていれば良くなり、実装を知る必要がなくなる
inject なら 必要な Nuxt コンテキストを 選択的に注入する事ができ、plugin の依存も明確 Vue.js の prototype 操作よりも運用可能な範囲が広く、 Store の Mapping よりも 技術的なコンテキストが薄い
chatbox.inc Plugin work well シンプルだがとても大事な設計のミソ Vue Component をよりシンプルに読みやすく ロジックを様々な形で分離する。
chatbox.inc Thanks!