前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。