Solution:

Thanks to @Jeronimas I figured out how to use dynamic components in vue. Basically you create a child component that switches between <p>and <input> tags, depending on props. You have to use <component> element for this, because it's an inherent vue component to manage dynamic components.

child:

<template>
  <input v-if="input" type="text" value="hello world">
  <p v-else>hello world</p>
</template>


<script setup>
const props = defineProps({
    input: Boolean
})
//emit input when form is submitted...
</script>

parent:

<template>
    <component :is="p" :input="true"/>
</template>


<script setup>
import p from './p.vue'
</script>

Vue is awesome <3.

Original Question:

Is it possible to input text into <p> tags, so that it will be stored in a database? I want to build a "live" CMS, similar to wordpress/webflow and using formatted <input> fields instead of <p>/<h> elements would make the html messy because, basically you would have to create two identical sites, one with normal text tags and the editable one with input fields, that look like normal text tags.

I was wondering if there is a way to manipulate reactive objects like ref to make it possible?

Alternatively you could create a site completely without normal text tags and instead use input field placeholders but that might mess up SEO.

CodePudding user response：

Like in the comment above using :is could work when switching between the states.

<component :is="tag">

tag value could be dynamic and depending on the tag value the component would change its state.

I would suggest using div with v-html that supports any markup when in live mode and when user is in editing mode display a rich text field. For rich text editing i would suggest to look at https://tiptap.dev/ you can bind the input value and the tiptap would create any html tags you need <p/>, <li/>, <h1/>