How can I use "v-runtime-template" with "<script setup>" ?

[frck006]

I don't see how to set "components" ?

[s5b]

I have a similar question, sort of…

I've created the an Product.vue example as follows, using the Composition API:

<template>
  <div>
    <h1>Product</h1>
    <v-runtime-template :template="productContent"></v-runtime-template>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import VRuntimeTemplate from 'vue3-runtime-template';

  const thing = ref('pineapple pizza')

  const productContent = '<p>You can now buy a new <strong>{{thing}}</strong> from us!</p>';

</script>

Running this code includes the v-runtime-template component in the Product template, simply by importing it. (So, that sort of answers the original post question.)

But it raises another question in that this code doesn't resolve the thing reference within the v-runtime-template component.

I suspect that I'm just not quite getting the access for the thing property quite right for the v-runtime-template component to find it. I get the following error in the console.

[Vue warn]: Property "thing" was accessed during render but is not defined on instance. 
  at <Anonymous > 
  at <Anonymous template="<p>You can now buy a new <strong>{{thing}}</strong> from us!</p>" > 
  at <Product onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

Any ideas and feedback greatly appreciated.

Vue: v3.2.20 Vue3-Runtime-Template: v1.0.1

[vector-kerr]

+1 to the above.

It seems to have trouble with ref variables in setup scripts, however interestingly it appears to be ok with props.

To test things out, I'm using the default vite / vue-ts setup, bringing in v-runtime-template, and then attempting to use the {{count}} variable which is defined as const count = ref(0) in the <script setup lang="ts"> script element.

The code looks like this:

<script setup lang="ts">
import { ref } from 'vue'
import VRuntimeTemplate from "vue3-runtime-template"
defineProps<{ msg: string }>()
const count = ref(0)
const template = "<div>{{count}} is the count</div>";
</script>

<template>
  <h1>{{ msg }}</h1>
  <v-runtime-template :template="template"></v-runtime-template>
</template>

The rest of the template renders, but the count does not display and the console shows the following error:

Property "count" was accessed during render but is not defined on instance.

If we could even bind variables directly against the <v-runtime-template /> element for use within the template (for example, <v-runtime-template :count="count" />) , that would go a long way.

By the way, thanks for providing this library -- it's something that I've looked around for in the past, and it's neat!

[vector-kerr]

Hey @s5b,

I've found a workaround which is not mentioned in the documentation. In the source for the component, there is a special property that is referenced named templateProps. You seem to be able to supply an object with additional properties to pass through.

In your case, you should be able to do something like the code block below. The important changes are the addition of the :template-props binding on the <v-runtime-template> component, and the addition of the const templateProps = {thing} in the script.

<template>
  <div>
    <h1>Product</h1>
    <v-runtime-template :template="productContent" :template-props="templateProps"></v-runtime-template>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import VRuntimeTemplate from 'vue3-runtime-template';

  const thing = ref('pineapple pizza')
  const templateProps = {
    thing
  };
  const productContent = '<p>You can now buy a new <strong>{{thing}}</strong> from us!</p>';

</script>

I hope that's helpful!

[s5b]

Hello, @vector-kerr

That is great! And thanks for the reply.

My need for this code has been parked for a while, and just this coming week will be bringing that need back to the fore. What fabulous timing!

This week I was planning to have a closer read of the source for the component, but you appear to have saved me the effort. Thank you so very much; very helpful indeed.

[cacing69]

hi i have used vue3 with sfc to, but when use @click on template (button), thats not fire @s5b