NuxtJS Components/Content module

Pizza_jp#29

Transcript

1. NuxtJS Components/Content module
2. Components module 自動でコンポーネントを探してきてインポートしてくれるモジュール import文とcomponentsフィールドを書かなくてよくなる 便利すぎるので試してみた話です
3. Components module $ yarn create nuxt-app playground-202005 $ yarn add --dev @nuxt/components で、簡単に入れられます。
4. Components module 現在（2020/05/29）の最新版バージョン2.12.2の場合 nuxt.config.jsを書き換える ※ 2.13.xからは不要になる buildModules: [ '@nuxt/components', ],
5. Components module <script lang="ts"> import Vue from 'vue' import Logo from '~/components/Logo.vue' export default Vue.extend({ components: { Logo } }) </script> これが
6. Components module <script lang="ts"> import Vue from 'vue' </script> こうなる
7. Components module $ yarn dev 実行！
8. べんり！
9. Content module MarkdownとかJSONなんかからNuxtJSへ渡してくれるモジュール なんかいろいろできる - 全文検索とかできる - Markdownの構文もVueのコンポーネントで書き出せる - 目次もつくれる スゴそうなので試してみた話です
10. Content module $ yarn add @nuxt/content ※ さっきのに追加 nuxt.config.jsを書き換える modules: [ '@nuxt/content', ],
11. Content module 下準備は簡単 contentディレクトリをつくってmdファイルを入れるだけ ├─- content │ └── articles │ ├── article-1.md │ └── article-2.md
12. Content module 一覧を取得する - $contentでディレクトリのパスをセット - チェーンシーケンスが返ってくる - sortByとかsearchとか繋げられる async asyncData ({ $content, params }) { const query = await $content('articles').limit(15) const articles = await query.fetch() return { articles } }
13. Content module コンテンツを取得する - $contentでファイルのパスをセット - <nuxt-content>テンプレートでページの本文を表示 async asyncData ({ $content, params }) { const articles = await $content('articles', params.slug).fetch() return { articles } }
14. おしまい