質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

1286閲覧

Nuxt.jsのnuxt-contentが正しく読み込まれていない

avocadoer

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2021/06/21 03:31

前提・実現したいこと

nuxt-contentを使用しmarkdownを表示させようとしています。

発生している問題・エラーメッセージ

ERROR [Vue warn]: Missing required prop: "document" found in ---> <NuxtContent> at .nuxt/content/nuxt-content.dev.vue <Pages/index.vue> at pages/index.vue <Nuxt> <VMain> <BlogContent> at components/blog/Content.vue <VApp> <Layouts/default.vue> at layouts/default.vue <Root>

該当のソースコード

vue

1<template> 2 <div> 3 <h1>{{ markdown.title }}</h1> 4 <!--下記のnuxt-contentが読み込まれていない--> 5 <!--IDE上でも[Unknown html tag nuxt-content]との表示が出る--> 6 <nuxt-content :docunemt="markdown" /> 7 </div> 8</template> 9 10<script lang="ts"> 11import { Context } from '@nuxt/types' 12export default { 13 components: {}, 14 async asyncData({ $content, params }: Context) { 15 const markdown = await $content('blog', params.slug || 'test').fetch() 16 return { markdown } 17 }, 18} 19</script> 20

nuxt.config.js

import colors from 'vuetify/es5/util/colors' export default { // Global page headers: https://go.nuxtjs.dev/config-head head: { titleTemplate: '%s - blog', title: 'blog', htmlAttrs: { lang: 'ja', }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '' }, ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], }, // Global CSS: https://go.nuxtjs.dev/config-css css: [], // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [], // Auto import components: https://go.nuxtjs.dev/config-components components: true, // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules buildModules: [ // https://go.nuxtjs.dev/typescript '@nuxt/typescript-build', // https://go.nuxtjs.dev/stylelint '@nuxtjs/stylelint-module', // https://go.nuxtjs.dev/vuetify '@nuxtjs/vuetify', ], // Modules: https://go.nuxtjs.dev/config-modules modules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', // https://go.nuxtjs.dev/content '@nuxt/content', ], // Axios module configuration: https://go.nuxtjs.dev/config-axios axios: {}, // Content module configuration: https://go.nuxtjs.dev/config-content content: {}, // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify vuetify: { customVariables: ['~/assets/variables.scss'], theme: { light: true, dark: false, themes: { dark: { primary: colors.blue.darken2, accent: colors.grey.darken3, secondary: colors.amber.darken3, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3, }, light: { primary: colors.purple, secondary: colors.grey.darken1, accent: colors.shades.black, error: colors.red.accent3, }, }, }, }, // Build Configuration: https://go.nuxtjs.dev/config-build build: {}, }

試したこと

npm cache clean --force npm ci

別環境を構築し試しましたが同じく表示されませんでした。
また、nodeの再インストールも行っています。

補足情報(FW/ツールのバージョンなど)

create-nuxt-appにて[nuxt modules]の質問にてcontentを選択しています。
npm run devは実行可能です。
IntelliJ IDEAにて開発を行っています。

node = v16.3.0
npm = 7.18.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

再度npm ciを行い、node再インストールを行ったところ表示されるようになりました。
具体的な解決案ではなく、ただのおま環かもしれないです。
ありがとうございました、

投稿2021/06/21 03:45

avocadoer

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問