add modal

src/App.vue

@@ -1,11 +1,27 @@
 <template>
+  <n-config-provider :theme="null">
+    <n-message-provider>
   <div id="nav">
     <router-link to="/">Startseite</router-link> |
     <router-link to="/about">Das sind wir</router-link>
   </div>
   <router-view />
+  </n-message-provider>
+  </n-config-provider>
 </template>
 
+<script>
+import { defineComponent } from 'vue'
+import {darkTheme} from 'naive-ui'
+
+export default defineComponent({
+  setup() {
+    return { darkTheme }
+  }
+})
+</script>
+
+
 <style lang="scss">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/components/HelloWorld.vue

@@ -5,30 +5,26 @@
       Check me out, BOY!
     </p>
 
-    <n-space vertical>
+    
-    <n-steps :current="status" :status="currentStatus">
+    <n-button type="primary" @click="showModal = true">Start Me up</n-button>
-       <n-step
+    <n-modal
-        title="I Me Mine"
+      v-model:show="showModal"
-        description="All through the day, I me mine I me mine, I me mine"
+      :mask-closable="false"
-      />
+      preset="dialog"
-      <n-step
+      title="Dialog"
-        title="Let It Be"
+      content="Are you sure?"
-        description="When I find myself in times of trouble Mother Mary comes to me"
+      positive-text="Confirm"
-      />
+      @positive-click="onPositiveClick"
-      <n-step
+      @negative-click="onNegativeClick"
-        title="Come Together"
+      negative-text="Cancel"
-        description="Here come old flat top He come grooving up slowly"
+    />
-      />
+
-      <n-step
-        title="Something"
-        description="Something in the way she moves Attracts me like no other lover"
-      />
-    </n-steps>
-    </n-space>
     </div>
 </template>
 
 <script>
+import { useMessage } from 'naive-ui'
+
 export default {
   name: "HelloWorld",
   props: {
@@ -36,9 +32,20 @@ export default {
   },
   data() { 
     return {
-      currentStatus: "error",
+      message: useMessage(),
-      status: 3
+      showModal: false
     }
+  },
+  methods: {
+    onPositiveClick () {
+        this.message.success('Submit')
+        this.showModal = false
+      },
+      onNegativeClick () {
+        this.message.success('Cancel')
+        this.showModalRef = false
+      }
+
   }
 };
 </script>