Fabien
Fabien
PostsComments
NNuxt
Created by Fabien on 11/19/2024 in #❓・help
Problem with markdown it and my nuxt project
Hello, I would like some help with markdown-it in a Nuxt 3 application. When I apply a rule, my application can no longer load the pages affected by markdown-it. Just the following code causes this issue: 
// https://github.com/markdown-it/markdown-it
import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

const md = markdownit({
  html: true,
  linkify: true,
  typographer: true
}).use(markdownitContainer, "notice", {
  // Just using 'use' for plugins causes an error
});
// https://github.com/markdown-it/markdown-it
import markdownit from 'markdown-it';
import markdownitContainer from 'markdown-it-container';

const md = markdownit({
  html: true,
  linkify: true,
  typographer: true
}).use(markdownitContainer, "notice", {
  // Just using 'use' for plugins causes an error
});
Without using any rules, the pages load: 
const md = markdownit({
  html: true,
  linkify: true,
  typographer: true
});
const md = markdownit({
  html: true,
  linkify: true,
  typographer: true
});
A part of my template to use the md variable: 
<div
    v-if="block['__component'] === 'shared.rich-text' && block.body.length > 0"
    class="rich-text"
    v-html="md.render(block.body)"
    id="article-content"
></div>
<div
    v-if="block['__component'] === 'shared.rich-text' && block.body.length > 0"
    class="rich-text"
    v-html="md.render(block.body)"
    id="article-content"
></div>
I think I have a problem with my libraries or in my code. For example, compatibility with Nuxt 3. I am new to Nuxt and I feel like many libraries have their own Nuxt version to work correctly... A part of the content of my package.json: 
{
  "dependencies": {
    "@types/markdown-it": "^14.1.2",
    "@types/markdown-it-container": "^2.0.10",
    "markdown-it": "^14.1.0",
    "markdown-it-container": "^4.0.0",
    "nuxt": "^3.13.2",
    "vue": "^3.5.13",
    "vue-router": "latest"
  }
}
{
  "dependencies": {
    "@types/markdown-it": "^14.1.2",
    "@types/markdown-it-container": "^2.0.10",
    "markdown-it": "^14.1.0",
    "markdown-it-container": "^4.0.0",
    "nuxt": "^3.13.2",
    "vue": "^3.5.13",
    "vue-router": "latest"
  }
}
Thank you.
6 replies
NNuxt
Created by Fabien on 11/7/2024 in #❓・help
watch not firing api call
Hello, can somebody help me. Why does the watcher doesn't fire anything ? 
//api call
const { data: article } = await useAsyncData('article', () => contentStore.fetchArticleBySlug(articleSlugID));

watch(article, (newValue, oldValue) => {
  console.log("hello")
})
//api call
const { data: article } = await useAsyncData('article', () => contentStore.fetchArticleBySlug(articleSlugID));

watch(article, (newValue, oldValue) => {
  console.log("hello")
})
But this work : 
onMounted(() => {
  if (article.value) {
    //...
  
onMounted(() => {
  if (article.value) {
    //...
7 replies
NNuxt
Created by Fabien on 10/25/2024 in #❓・help
What is the difference between @nuxtjs/strapi and @nuxtjs/strapi-edge ?
Hello, what is the difference between "@nuxtjs/strapi" and "@nuxtjs/strapi-edge" ? On the official website, it say to write down : npx nuxi@latest module add strapi But the V5 wasn't working. And after some research, i found out about "@nuxtjs/strapi-edge".
4 replies