Pass custom html and script into content component

[dbzx10299]

I'm using nuxt content version 2 which comes with nuxt 3 and I have a blog setup. The articles use markdown files and they have a component system where you can use a vue component in markdown.

If I create an article sometimes I need custom html rendered and the thing that was getting annoying was for every article, if I needed a demo, I had to create a component each time.

I thought it would be better to create a general component that I can pass a script and html into but I can't get the script to execute.

take this code for example in some-post.md

::CustomHtml
<div class="custom-html">Some div</div>
::

and in the components folder we have the following code in the <CustomHtml /> component:

<template>
  <slot />
</template>

This works just fine and it's quite useful. The advantage to this is maybe you want a grid setup, here you can just code the grid in html and it will be correctly outputted.

But how can we add javascript to this?

How could this be accomplished from the markdown file?

some-post.md

::CustomHtml
<div class="some-div">Some div</div>

<script>
const el = document.querySelector('.some-div')
el.addEventListener('click', e => {
  console.log('clicked')
})
</script>

::

[ManasMadrecha]

In your md files, if you want to type vanilla JS (not Vue stuff), you can type your Script code outside the component. E.g.,

::CustomHtml
<div class="some-div">Some div</div>
::

::Script
const el = document.querySelector('.some-div')
el.addEventListener('click', e => {console.log('clicked')})
::

[dbzx10299]

Can you give an example how the ::Script component would look? You are passing js code into a component but the slot is used in a template, and the template is in a script tag.

[ManasMadrecha]

The Script component is shipped with Nuxt.
See: https://nuxt.com/docs/getting-started/seo-meta#components

If that doesn't work, then maybe you can create own Script component.

<template>
    <component is="script">
        <slot></slot>
    </component>
</template>