Merge pull request #137 from selemondev/update-readme

docs: update readme

packages/nuxt-ui-vue/README.md

@@ -363,6 +363,49 @@ For any component that uses the `variant` prop such as the `UButton`, `UBadge`,
 </template>
 ```
 
+-  The `Notifications` component comes with a position prop to enable you to specify the position of the  `Notifications` component. To get started with it, you need to do to import the `injectToast()` function and the `UNotifications` component in your `App.vue` file as shown below:
+
+```vue
+<!-- app.vue file -->
+<script setup lang="ts">
+import { injectToast } from 'nuxt-ui-vue'
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  injectToast()
+})
+</script>
+
+<template>
+  <div>
+    <UNotifications position="top-right" />
+  </div>
+</template>
+```
+
+- By default, the position of the component is set to `bottom-right`.
+
+- Then in your other component, for example, Hello component, you can do the following:
+
+```vue
+<!-- Hello.vue component -->
+
+<script setup lang="ts">
+import { useToast } from 'nuxt-ui-vue'
+
+const toast = useToast()
+</script>
+
+<template>
+  <UButton
+    label="Show toast" @click="toast.add({
+      title: 'Update downloaded.',
+      description: 'It will be installed on restart. Restart now?',
+    })"
+  />
+</template>
+```
+
 
 🥳 Well done, you can now go ahead and build your web application with ease.