Stack Overflow
Stack Overflow

Questions tagged [nuxt-content]

Use this tag for questions related to Content module of Nuxt.JS. This module is optional for Nuxt projects and provide ability to fill project with content using Markdown, JSON, YAML, CSV and XML files. Shortly - Git-based CMS

Links

Official website - https://content.nuxtjs.org

Github Repo - https://github.com/nuxt/content

Installation

Docs: https://content.nuxtjs.org/installation

  • NPM: npm install @nuxt/content
  • Yarn: yarn add @nuxt/content
  • Also available as option when creating project with create-nuxt-app

Features:

  • Blazing fast hot reload in development
  • Vue components in Markdown
  • Full-text search
  • Support static site generation with nuxt generate
  • Powerful QueryBuilder API (MongoDB like)
  • Syntax highlighting to code blocks in markdown files using PrismJS.
  • Table of contents generation
  • Handles Markdown, CSV, YAML, JSON, XML
  • Extend with custom parsers
  • Extend with hooks

Tutorial

Create a blog with Nuxt Content

Description taken from Introduction markdown file

69 questions
9
votes
4 answers

Use nuxt/content to display markdown fetched from a database

I'm using nuxt / content in my app and it's working fine. In another part of the app, I'd like to fetch some markdown from a database and display it. let mytext = "Some *markdown* fetched from a db here." This…
ccleve
  • 15,239
  • 27
  • 91
  • 157
5
votes
1 answer

Using Tailwind CSS classes in Nuxt.js markdown content

I'm using Nuxt with the content plugin and Tailwind typography. I'd like to use Tailwind classes inside markdown files to allow for adding some basic layout.
### Some…
Andreas Korth
  • 91
  • 6
4
votes
2 answers

Nuxt Content v2 markdown headers rendered as URLs

I'm writing Markdown content in Nuxt 3 & Nuxt Content 2.1 and I am facing a problem as I cannot write h2-h6 headers without it rendering them as links. h1 works fine with one octothorpe symbol but as soon as I add 1 or more of them to render smaller…
dhgy
  • 83
  • 7
4
votes
1 answer

How to fetch folder structure from Nuxt content?

I'm trying to fetch my content structure to display the list on the homepage: my folder is like that : content / -- | A / ---- | an_article.md -- | B / ---- | another_one.md -- | C / ---- | etc.md And I would like to use these folders as categories…
Aurore
  • 696
  • 4
  • 16
3
votes
2 answers

Page Title Set By Content Module Does Not Change Back After Navigation

I am using Nuxt 3 and Nuxt Content for my site. I set a default page title inside the nuxt.config.ts file (see Documentation: SEO and Meta), and the Content module sets the title on every page that uses it. However, returning to any other page does…
muell
  • 383
  • 1
  • 15
3
votes
0 answers

While sharing link, it's showing default or blank

Open graph is not showing while sharing link it's show default or blank.. I want to set it as dynamic for each page. async asyncData({ route, app }) { const appData = await 'my API call for data' if (appData) { return { pageTitle:…
DHAVAL KANJARIYA
  • 31
  • 3
3
votes
1 answer

NuxtJS: routes working in dev but not production (netlify)

Still very much learning JS, but I'm struggling with this issue. In the VS code debug environment, everything works, but when I deploy to Netlify, some routes work only sometimes. For example, this route, along with the other /interests routes,…
Brians Spare Time
  • 63
  • 6
3
votes
1 answer

How to make Nuxt Content hot reload in production mode working

I am using Nuxt Content to store application content (JSON files). It works cool in dev mode with hot reload. The backend of my site changes any file in content folder and this changes immediately in the browser without reloading the page. But in…
Yosef
  • 241
  • 2
  • 12
3
votes
1 answer

Nuxt Content async fetch in component

I'm new to the @nuxt/content module and it's working well except within components. Here I'm trying to get the content like so: layout.vue export default { name: 'Default', CONTENT: 'content', async asyncData({ $content }) { const content…
eamanee
  • 33
  • 1
  • 4
2
votes
0 answers

How to use Rehype Pretty Code with Nuxt3 markdown

I am trying to get the rehype pretty code plugin set up in nuxt content v2. According to the docs it already uses rehype and remark under the hood and the config file does allow for adding these plugins. In the nuxt content v2 docs it states: This…
dbzx10299
  • 722
  • 2
  • 14
2
votes
1 answer

Nuxt Content : QueryBuilderParams with where condition not working

So I have this nuxt-content project with several articles available in the /content/news folder. I have a /pages/news/index.vue page with inside, it works fine. But I want to plug filter features on this page, eg.…
Augustin Riedinger
  • 20,909
  • 29
  • 133
  • 206
2
votes
1 answer

Querying JSON array in Nuxt 3 with Nuxt Content

How do I query a JSON array for a single element in Nuxt 3 and Nuxt Content? ├── @nuxt/content@2.3.0 └── nuxt@3.0.0 content/people.json [ { "name": "Name1", "id": 1 }, { "name": "Name2", "id": 2 } ] Querying all of the…
duffn
  • 3,690
  • 8
  • 33
  • 68
2
votes
3 answers

Fetch all nested content files and group them by directories in Nuxt content

I'm having this list of blogposts called articles that I call from the content folder. async asyncData ({ $content }) { const articles = await $content('', { deep: true }) // .where({ cat: 'A' }) .only(['title', 'description',…
Aurore
  • 696
  • 4
  • 16
2
votes
1 answer

Nuxt asyncData returns empty array for a json5 file with Nuxt Content

I am using the asyncData method to retrieve the content of a json5 file and I get an empty array. My file is located at content/myfile.json5 The content is : [ { id: 1 }, { id: 21 } ] And my method is : async asyncData({…
jbuiquan
  • 21
  • 5
2
votes
1 answer

Use axios together with `nuxt/content` in a component's `fetch` method

I´m creating a static site using @nuxt/content and I´m trying to create some components that will be used from the markdown. One of those components needs to call external API to retrieve some data that is shown in the HTML. These are the relevant…
jgsogo
  • 706
  • 1
  • 9
  • 18
1
2 3 4 5