Nuxt•3mo ago

Migrating simple existing content including styles (Nuxt 3) to Nuxt Content

I have a simple website that needs a sort of CMS required (Nuxt Content): https://github.com/aligu7/vagifguliyev_nuxt I want to add .md files for data usage, and put them in .vue files, i am gonna use .md files to data storage and .vue files for styling putting everything in place or however you do that in Nuxt Content. I read the docs but didn't get how to migrate my current website to Nuxt Content. I need a professional way to do it.

GitHub

GitHub - aligu7/vagifguliyev_nuxt: Prof. Dr. Vagif Guliyev's Website

Prof. Dr. Vagif Guliyev's Website. Contribute to aligu7/vagifguliyev_nuxt development by creating an account on GitHub.

12 Replies

Ali GuliyevOP•3mo ago

at this point i have just added the module to my project

joe_black_unlucky•3mo ago

Is there a question anywhere or you just want someone to do it for you? Try #💼・hiring

Ali GuliyevOP•3mo ago

no i need someone to explain me how to migrate a regular .vue file to a .vue file with markdowns

joe_black_unlucky•3mo ago

Look at what markdown formatting has to offer, and align it with what you want... https://www.markdownguide.org/basic-syntax/

Basic Syntax | Markdown Guide

The Markdown elements outlined in the original design document.

Wouter•3mo ago

- move the text to a .md file in the content folder and apply markdown syntax - fetch the content in the vue file with the queryContent composable: https://content.nuxt.com/composables/query-content or use the ContentDoc component: https://content.nuxt.com/components/content-doc you can also check out this content starter template to see how it's set up: https://nuxt.new/s/content

Nuxt Content

queryContent() - Nuxt Content

The queryContent composable provides methods for querying and fetching your contents.

Nuxt Content

- Nuxt Content

The fastest way to query and display your content.

StackBlitz

Nuxt - Starter - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Ali GuliyevOP•3mo ago

When I use queryContent as shown in the docs:

const { data } = await useAsyncData("index", () => queryContent("/").findOne());

const { data } = await useAsyncData("index", () => queryContent("/").findOne());

I get the error shown in the image, and also some warning, idk what that is

Ali GuliyevOP•3mo ago

that warning is also prolly related to the querying the content btw what is the "/" for in queryContent? maybe that is the issue? i dont get what / is for

Ali GuliyevOP•3mo ago

btw all of the data content is being rendered on the page that is not a problem, but errors are a bit concerning @Wouter , idk why those occur tho

Wouter•3mo ago

It is the path of the markdown file that you want to fetch. "/" means it will try to fetch the index.md in the root folder.
If you named the markdown file differently, for example myfile.md, then this should be queryContent("/myfile").findOne() The errors in your console show a 404 error, which means it cannot find the index.md file. The data content that is rendered on that page seems to be still comoing from your index.vue, not from markdown

Ali GuliyevOP•3mo ago

I did this:

const { data } = await useAsyncData("main", () =>
  queryContent("/main").findOne()
);

const { data } = await useAsyncData("main", () =>
  queryContent("/main").findOne()
);

and still get errors and i renamed my file to main.md

Wouter•3mo ago

it's working for me. I tried it in stackblitz based on your github repo: https://stackblitz.com/~/github.com/aligu7/vagifguliyev_nuxt?file=pages/index.vue is your main.md file inside the content folder?

Ali GuliyevOP•3mo ago

currently i have index.md and i use

const { data } = await useAsyncData("index", () => queryContent("/").findOne());

const { data } = await useAsyncData("index", () => queryContent("/").findOne());

in my index.vue content is being rendered, but theere errore as shown previously @Wouter , do you have time, maybe we can talk on Discord? if you are available ofc it would help a lot 🙂

Gaming

Programming

Migrating simple existing content including styles (Nuxt 3) to Nuxt Content