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
NuxtJS Components/Content module
Search
Kaneko Takeshi
May 29, 2020
Technology
0
19
NuxtJS Components/Content module
Pizza_jp#29
Kaneko Takeshi
May 29, 2020
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
26
Eye Tracking on the Browser
tkckaneko
0
83
IEEE754を完全に理解した
tkckaneko
1
75
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
92
多分これが一番早いと思います
tkckaneko
0
25
暗黒面の話
tkckaneko
0
23
CSR / SSR / SSG / JAMstack
tkckaneko
0
67
BOLT
tkckaneko
0
25
CSS Logical Properties and Values
tkckaneko
0
32
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
100
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
230
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.7k
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
150
Claude Code に プロジェクト管理やらせたみた
unson
6
3.1k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
420
AWS認定を取る中で感じたこと
siromi
1
180
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Fireside Chat
paigeccino
37
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Done Done
chrislema
184
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
NuxtJS Components/Content module
Components module 自動でコンポーネントを探してきてインポートしてくれるモジュール import文とcomponentsフィールドを書かなくてよくなる 便利すぎるので試してみた話です
Components module $ yarn create nuxt-app playground-202005 $ yarn add
--dev @nuxt/components で、簡単に入れられます。
Components module 現在(2020/05/29)の最新版バージョン2.12.2の場合 nuxt.config.jsを書き換える ※ 2.13.xからは不要になる buildModules: [ '@nuxt/components', ],
Components module <script lang="ts"> import Vue from 'vue' import Logo
from '~/components/Logo.vue' export default Vue.extend({ components: { Logo } }) </script> これが
Components module <script lang="ts"> import Vue from 'vue' </script> こうなる
Components module $ yarn dev 実行!
べんり!
Content module MarkdownとかJSONなんかからNuxtJSへ渡してくれるモジュール なんかいろいろできる - 全文検索とかできる - Markdownの構文もVueのコンポーネントで書き出せる - 目次もつくれる
スゴそうなので試してみた話です
Content module $ yarn add @nuxt/content ※ さっきのに追加 nuxt.config.jsを書き換える modules:
[ '@nuxt/content', ],
Content module 下準備は簡単 contentディレクトリをつくってmdファイルを入れるだけ ├─- content │ └── articles │
├── article-1.md │ └── article-2.md
Content module 一覧を取得する - $contentでディレクトリのパスをセット - チェーンシーケンスが返ってくる - sortByとかsearchとか繋げられる async
asyncData ({ $content, params }) { const query = await $content('articles').limit(15) const articles = await query.fetch() return { articles } }
Content module コンテンツを取得する - $contentでファイルのパスをセット - <nuxt-content>テンプレートでページの本文を表示 async asyncData ({
$content, params }) { const articles = await $content('articles', params.slug).fetch() return { articles } }
おしまい