nuxt
Content not statically generated when using `queryContent`
Environment
- Operating System:
Windows_NT - Node Version:
v17.0.0 - Nuxt Version:
3.0.0-rc.3 - Package Manager:
[email protected] - Builder:
vite - User Config:
css,modules,ssr,target,typescript - Runtime Modules:
@nuxt/[email protected] - Build Modules:
-
Reproduction
Run
pnpm i --shamefully-hoist
pnpm generate
pnpm preview
Describe the bug
I am building my personnal website and I want to prerender my pages with nuxt generate. Inside of my homepage, I am using queryContent to get the data that I want to display (projects, skills and milestones).
const { data } = await useAsyncData('projects', () =>
queryContent('/projects').findOne()
);
I also have a dynamic project page that should display the content of markdown files that are in /content/projects/
<script setup lang="ts">
const route = useRoute();
const { data } = await useAsyncData(route.params.project[0], () =>
queryContent(`/projects/${route.params.project}`).findOne()
);
</script>
<template>
<NuxtLayout name="page">
<ContentRenderer :value="data" tag="section">
<MarkdownRenderer :value="data" />
</ContentRenderer>
<BaseFooter />
</NuxtLayout>
</template>
Everything works fine in the dev environment but when i'm doing nuxt generate then nuxt preview, everything that is related to Nuxt Content is not displayed. Also, none of my pages seems to be prerendered.
What am I doing wrong ?
Additional context
My `nuxt.config.ts`:
// eslint-disable-next-line import/no-extraneous-dependencies
import { defineNuxtConfig } from 'nuxt';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/styles/reset.scss', '~/styles/globals.scss'],
modules: ['@nuxt/content'],
ssr: false,
target: 'static',
typescript: {
strict: true,
},
});
My `package.json`:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"lint:ts": "eslint **/*.ts **/*.vue",
"lint:style": "stylelint \"**/*.{vue,scss}\"",
"lint:prettier": "prettier --check .",
"lint": "pnpm lint:ts && pnpm lint:style && pnpm lint:prettier",
"lintfix": "prettier --write .",
"prepare": "husky install"
},
"dependencies": {
"locomotive-scroll": "^4.1.4"
},
"devDependencies": {
"@nuxt/content": "^2.0.0",
"@nuxtjs/eslint-config-typescript": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
"eslint": "^7.32.0 || ^8.2.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^9.0.1",
"husky": "^8.0.1",
"nuxt": "3.0.0-rc.3",
"postcss": "^8.4.14",
"postcss-html": "^1.4.1",
"prettier": "^2.6.2",
"sass": "^1.51.0",
"stylelint": "^14.8.2",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard-scss": "^3.0.0",
"stylelint-config-standard-vue": "^1.0.0",
"stylelint-prettier": "^2.0.0",
"typescript": "^4.6.4"
}
}
Logs
No response
Also very interested in this. I created my nuxt app with nuxt/content, generated and shipped the public folder to a CDN.
The result when peeking into the browser console:
Request URL: https://example.com/api/_content/query/990068364?_params={%22where%22:[{%22_path%22:%22--REGEX+/^%5C%5C//%22}]}&previewToken
Request Method: get
Status Code: 404
$ tree .output/public
.output/public/
├── 200
│ └── index.html
├── 404
│ └── index.html
├── _nuxt
│ ├── ContentList-bae0c0e4.mjs
│ ├── ContentNavigation-e782cd7c.mjs
│ ├── Markdown-34377766.mjs
│ ├── ProseA-56d06e87.mjs
│ ├── ProseBlockquote-79549b82.mjs
│ ├── ProseCode-400681fc.mjs
│ ├── ProseCode.c12da1e5.css
│ ├── ProseCodeInline-dc26dde4.mjs
│ ├── ProseEm-d8e0418f.mjs
│ ├── ProseH1-13386be5.mjs
│ ├── ProseH2-c9e77f12.mjs
│ ├── ProseH3-5116661d.mjs
│ ├── ProseH4-dae17f06.mjs
│ ├── ProseH5-1e736ac5.mjs
│ ├── ProseH6-016b2fac.mjs
│ ├── ProseHr-5fd866ad.mjs
│ ├── ProseImg-72ae7ba5.mjs
│ ├── ProseLi-13459e9e.mjs
│ ├── ProseOl-d2790247.mjs
│ ├── ProseP-1a7dc882.mjs
│ ├── ProseStrong-f9929815.mjs
│ ├── ProseTable-e097f0ce.mjs
│ ├── ProseTbody-3dc23896.mjs
│ ├── ProseTd-60dd589f.mjs
│ ├── ProseTh-40602465.mjs
│ ├── ProseThead-f7503e51.mjs
│ ├── ProseTr-b4384534.mjs
│ ├── ProseUl-da1105e3.mjs
│ ├── _...slug_-a209eceb.mjs
│ ├── entry-b37e8e0b.mjs
│ ├── entry.7bb572af.css
│ ├── manifest.json
│ └── web-socket-fe9b7636.mjs
├── api
│ └── _content
│ └── cache
└── index.html
I would expect that queryContent to be hitting against some JSON resource as the is no server to respond with that request.
@ColinLienard I did some research into this and this module doens't work with ssr: false.
https://github.com/nuxt/content/issues/1229
What I think you want to do is set target: static and ssr: true. Then you have a static website that is pre-rendered.
Thanks for your answer (and sorry for my late reply, I was on vacation).
I managed to get it to work using ssr: true and nuxt generate. However, when I preview the application with pnpm preview, I get the error You should use slots, but it works fine when I preview with npx serve dist.
I also updated nuxt to 3.0.0-rc.4.
I also had a strange bug with locomotive-scroll that told me the document was not defined, which didn't happen before (I didn't change any code, just updated nuxt). To fix it, I now import the package dynamically:
const locomotiveScroll = await import('locomotive-scroll');
scroll.value = new locomotiveScroll.default({ ... });
I tried setting target – https://github.com/vinayakkulkarni/vinayakkulkarni.dev/commit/66989e487630baa3f28e622e5462a25ae841bb24
but when I try to view the articles page – https://vinayakkulkarni.dev/articles/ I can view it but I cannot navigate to the article ?!
edit: try clicking on the V logo, when it goes back to index.vue, nothing appears but if you refresh it the browser, you can see the homepage
I think I am hitting perhaps the same thing? It seems to be impossible to load one post unless I first load all the posts. It does seems like SSR or generate are what is breaking here. If I hard refresh it loads nothing.
