N
Nuxt•2mo ago
Kyllian

Nuxt TipTap, how to get the content to a parent component

Nuxt TipTap suggest we create a component for the editor. But how do I get data from the editor to my child component?

message.txt

2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Kyllian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I don't have enough specific information in the provided knowledge sources to answer your question about Nuxt TipTap and getting content from the editor to a parent component. The knowledge sources don't contain any information about TipTap integration with Nuxt. However, I can provide some general guidance on passing data from child to parent components in Nuxt based on the available information: In Nuxt and Vue, you typically use events to pass data from a child component to a parent component. This is often done using the emit method in the child component and listening for that event in the parent. Here's a general pattern you could adapt: 1. In the child component (your TipTap editor component), you would emit an event with the editor content: 
<script setup>
const emit = defineEmits(['update:content'])

// When the editor content changes
function onUpdate({ editor }) {
  emit('update:content', editor.getHTML())
}
</script>
<script setup>
const emit = defineEmits(['update:content'])

// When the editor content changes
function onUpdate({ editor }) {
  emit('update:content', editor.getHTML())
}
</script>
2. In the parent component, you would listen for this event: 
<template>
  <TipTapEditor @update:content="handleContentUpdate" />
</template>

<script setup>
function handleContentUpdate(content) {
  // Do something with the content
  console.log(content)
}
</script>
<template>
  <TipTapEditor @update:content="handleContentUpdate" />
</template>

<script setup>
function handleContentUpdate(content) {
  // Do something with the content
  console.log(content)
}
</script>
This pattern is demonstrated in the Stack Overflow post about emitting input values, though it's not specific to TipTap. For more detailed and specific information about integrating TipTap with Nuxt and passing editor content to parent components, you might need to consult the TipTap documentation or search for Nuxt-specific TipTap examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@166602211780984832> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?