create-nodality-vue 1.0.0-beta.3 → 1.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nodality-vue",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "A scaffolding tool for creating Vue.js projects integrated with Nodality.",
   "main": "bin/index.js",
   "bin": {

package/templates/src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
     <HelloWorld :text="textInstance" v-model:msg="welcomeMessage" />
-  </div>
 </template>
 
 <script>

package/templates/src/components/HelloWorld.vue

@@ -1,40 +1,39 @@
-<template>
-  <div>
-    <input v-model="message" @input="updateText" placeholder="Edit me" />
-    <div ref="renderedText" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    text: Object,
-    msg: String,
-  },
-  data() {
-    return {
-      message: this.msg || "",
-    };
-  },
-  watch: {
-    message(newValue) {
-      this.$emit("update:msg", newValue);
-    },
-  },
-  mounted() {
-    this.renderText();
-  },
-  updated() {
-    this.renderText();
-  },
-  methods: {
-    updateText(event) {
-      this.text.set({ text: event.target.value }).render(this.$refs.renderedText);
-    },
-    renderText() {
-      this.$refs.renderedText.innerHTML = "";
-      this.text.render(this.$refs.renderedText);
-    },
-  },
-};
+<script setup>
+import { useTemplateRef, onMounted, defineProps, defineEmits, watch } from 'vue'
+//import {Text} from "../lib/TextCopy.js";
+
+// Define props to accept the msg value
+const props = defineProps({
+  msg: String,
+  text: Object
+}) 
+
+const emit = defineEmits(['update:msg'])
+
+// the first argument must match the ref value in the template
+const input = useTemplateRef('my-input')
+let mycomp = useTemplateRef('my-comp')
+
+onMounted(() => {
+  input.value.focus()
+ let ela = props.text.render();//document.createElement("h1");
+ mycomp.value.appendChild(ela);
+})
+
+watch(() => props.msg, () => { // 12:21:57 Wow!!!
+
+ mycomp.value.innerHTML = ""; // Clear existing content
+    const element = props.text.render(); // Call the render method
+    mycomp.value.appendChild(element);
+})
+
+function updateMessage(event) {
+  emit('update:msg', event.target.value)
+}
 </script>
+
+<template>
+  <h2>Hello from static Vue</h2>
+  <input ref="my-input" :value="msg" @input="updateMessage" />
+  <div ref="my-comp"/>
+</template>