updated docs

Author: dipaksarkar

docs/.vuepress/config.js

@@ -1,27 +1,27 @@
-const { description } = require("../../package");
-const WindiCSS = require("vite-plugin-windicss").default;
-const { resolve } = require("path");
+const { description } = require('../../package')
+const WindiCSS = require('vite-plugin-windicss').default
+const { resolve } = require('path')
 
 module.exports = {
   // dev server port
   port: 8082,
 
   // site config
-  lang: "en-US",
-  title: "Vue Number Format",
+  lang: 'en-US',
+  title: 'Vue Number Format',
   description: description,
   head: [
-    ["meta", { name: "theme-color", content: "#3eaf7c" }],
-    ["meta", { name: "apple-mobile-web-app-capable", content: "yes" }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
     [
-      "meta",
-      { name: "apple-mobile-web-app-status-bar-style", content: "black" },
+      'meta',
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
     ],
     [
-      "meta",
+      'meta',
       {
-        name: "google-site-verification",
-        content: "Tf6UVeu-ZmZtGqB5tdcYymZ79101gyGKcpzqwWhDb1U",
+        name: 'google-site-verification',
+        content: 'Tf6UVeu-ZmZtGqB5tdcYymZ79101gyGKcpzqwWhDb1U',
       },
     ],
   ],
@@ -33,39 +33,39 @@ module.exports = {
         WindiCSS({
           preflight: false,
           scan: {
-            include: [resolve(__dirname, "./**/*.{vue,html,md}")],
-            exclude: ["node_modules/**/*", ".git/**/*"],
+            include: [resolve(__dirname, './**/*.{vue,html,md}')],
+            exclude: ['node_modules/**/*', '.git/**/*'],
           },
           theme: {
             extend: {
               colors: {
-                primary: "#3eaf7c",
+                primary: '#3eaf7c',
               },
             },
           },
-          plugins: [require("windicss/plugin/forms")],
+          plugins: [require('windicss/plugin/forms')],
         }),
       ],
     },
   },
 
   // theme and its config
-  theme: "@vuepress/theme-default",
+  theme: '@vuepress/theme-default',
   themeConfig: {
-    logo: "/favicon.png",
+    logo: '/favicon.png',
     editLinks: false,
-    repo: "coders-tm/vue-number-format",
+    repo: 'coders-tm/vue-number-format',
     lastUpdated: true,
     sidebar: {
-      "/guide/": [
+      '/guide/': [
         {
-          title: "Guide",
+          title: 'Guide',
           collapsable: false,
           children: [
-            "/guide/README.md",
-            "/guide/config.md",
-            "/guide/example.md",
-            "/guide/play-ground.md",
+            '/guide/README.md',
+            '/guide/config.md',
+            '/guide/demo.md',
+            '/guide/play-ground.md',
           ],
         },
       ],
@@ -74,26 +74,26 @@ module.exports = {
   darkMode: false,
   plugins: [
     [
-      "@vuepress/plugin-search",
+      '@vuepress/plugin-search',
       {
         locales: {
-          "/": {
-            placeholder: "Search",
+          '/': {
+            placeholder: 'Search',
           },
         },
       },
     ],
     [
-      "@vuepress/register-components",
+      '@vuepress/register-components',
       {
-        componentsDir: resolve(__dirname, "./components"),
+        componentsDir: resolve(__dirname, './components'),
       },
     ],
     [
-      "@vuepress/plugin-google-analytics",
+      '@vuepress/plugin-google-analytics',
       {
-        id: "UA-76508942-4",
+        id: 'UA-76508942-4',
       },
     ],
   ],
-};
+}

docs/guide/demo.md

@@ -0,0 +1,23 @@
+# Example
+
+### Vue3 Component
+
+<p>
+  <iframe src="https://codesandbox.io/embed/vue-number-format-vue3-example-67dczb?fontsize=14&hidenavigation=1&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="Vue Number Format Vue3 Example"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  ></iframe>
+</p>
+
+### Integration with Quasar
+
+<p>
+  <iframe src="https://codesandbox.io/embed/vue-number-format-integration-with-quasar-nxqb77?fontsize=14&hidenavigation=1&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="Vue Number Format: Integration with Quasar"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  ></iframe>
+</p>