create-nodality-vue 1.0.0-beta.7 → 1.0.0-beta.70

package/bin/index.js

@@ -43,7 +43,7 @@ function createVueProject(projectName) {
     },
     dependencies: {
       vue: "^3.0.0",
-      nodality: "^1.0.0-beta.4",
+      nodality: "^1.0.0-beta.70",
     },
     devDependencies: {
       vite: "^4.0.0",

package/package.json

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

package/templates/src/App.vue

@@ -1,24 +1,43 @@
 <template>
-    <h1>Hello Vue</h1>
-    <HelloWorld :text="textInstance" v-model:msg="welcomeMessage" />
+  <HelloWorld :text="textInstance" v-model:msg="welcomeMessage"/>
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
-import { Text } from "nodality";
-
+import HelloWorld from './components/HelloWorld.vue'
+import {Text} from "nodality";
 export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  },
+ 
+  watch: {
+    // Watch for changes to welcomeMessage and recreate the instance
+    welcomeMessage() {
+      console.log(this.welcomeMessage) // THIS WORKS
+       this.textInstance = new Text(this.welcomeMessage).set({ size: "S1", color: "#1abc9c" });
+    },
+  },
   data() {
     return {
-      welcomeMessage: "Welcome to Nodality + Vue.js",
-      textInstance: null,
-    };
+      welcomeMessage: "Welcome to Your Vue.js App", // Define a reactive property
+     textInstance: null
+    }
   },
-  created() {
-    this.textInstance = new Text(this.welcomeMessage).set({
-      size: "S1",
-      color: "#1abc9c",
-    });
+   created() {
+    // Initialize the Text instance when the component is created
+    this.textInstance = new Text(this.welcomeMessage).set({ size: "S1", color: "#1abc9c" });
   },
-};
+}
 </script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/templates/src/components/HelloWorld.vue

@@ -1,6 +1,5 @@
 <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({
@@ -33,5 +32,6 @@ function updateMessage(event) {
 </script>
 
 <template>
-  <h2>Hello from static Vue</h2>
+<input ref="my-input" :value="msg" @input="updateMessage" />
+<div ref="my-comp"/>
 </template>