diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 000000000..13566b81b
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/Intro-to-Vue-3.iml b/.idea/Intro-to-Vue-3.iml
new file mode 100644
index 000000000..d6ebd4805
--- /dev/null
+++ b/.idea/Intro-to-Vue-3.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+ <component name="NewModuleRootManager" inherit-compiler-output="true">
+ <exclude-output />
+ <content url="file://$MODULE_DIR$" />
+ <orderEntry type="inheritedJdk" />
+ <orderEntry type="sourceFolder" forTests="false" />
+ </component>
+</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 000000000..639900d13
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectRootManager">
+ <output url="file://$PROJECT_DIR$/out" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 000000000..b4c3f11cd
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectModuleManager">
+ <modules>
+ <module fileurl="file://$PROJECT_DIR$/.idea/Intro-to-Vue-3.iml" filepath="$PROJECT_DIR$/.idea/Intro-to-Vue-3.iml" />
+ </modules>
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 000000000..35eb1ddfb
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="VcsDirectoryMappings">
+ <mapping directory="" vcs="Git" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/index.html b/index.html
index 56c112638..8279d4531 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,19 @@
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
- <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
- <h1>Product goes here</h1>
+ <h1> {{ product }}</h1>
</div>
- <!-- Import Js -->
+ <!-- Import App -->
<script src="./main.js"></script>
+
+ <!-- Mount App -->
+ <script>
+ const mountedApp = app.mount('#app ')
+ </script>
</body>
</html>
diff --git a/main.js b/main.js
index aedc73d86..9d609eddd 100644
--- a/main.js
+++ b/main.js
@@ -1 +1,7 @@
-const product = 'Socks'
+const app = Vue.createApp ({
+ data: function () {
+ return {
+ product: 'Socks'
+ }
+ }
+})
\ No newline at end of file