feat: enhance project configuration and add new features

src/App.vue

@@ -11,12 +11,19 @@ const getName = async () => {
 </script>
 
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
-  <button class="green" @click="getName" aria-label="get name">Name from API is: {{ name }}</button>
+  <div>
+    <h1>You did it!</h1>
+    <p>
+      Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
+      documentation
+    </p>
+    <button class="green" @click="getName" aria-label="get name">
+      Name from API is: {{ name }}
+    </button>
+  </div>
+
+  <DynamicDialog /> <ConfirmDialog /> <Toast />
+  <RouterView />
 </template>
 
 <style scoped></style>