update vue

CRogos · Apr 5, 2022 · b9495fd · b9495fd
1 parent 644c7a7
commit b9495fd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -6,18 +6,20 @@
   </head>
 
   <body>
-    <div id="my-app">
+    <div id="app">
       <my-component></my-component>
     </div>
-    {% raw %}
+{% raw %}
     <script type="text/javascript">
-      new Vue({
-        el: '#my-app',
+      const app = {
         components: {
           'my-component': httpVueLoader('my-component.vue')
         }
-      });
+      };
+
+      Vue.createApp(app).mount("#app");
+
     </script>
-    {% endraw %}
+{% endraw %}
   </body>
 </html>
diff --git a/my-component.vue b/my-component.vue
@@ -1,19 +1,23 @@
 <template>
-    <div class="hello">Hello {{who}}</div>
+  <div class="example">{{ msg }}</div>
 </template>
 
 <script>
-module.exports = {
-    data: function() {
-        return {
-            who: 'world'
-        }
+export default {
+  data () {
+    return {
+      msg: 'Hello world! 1'
     }
+  }
 }
 </script>
 
 <style>
-.hello {
-    background-color: #ffe;
+.example {
+  color: red;
 }
-</style>
+</style>
+
+<custom1>
+  This could be e.g. documentation for the component.
+</custom1>