diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index f624281..f9d3b32 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -21,24 +21,24 @@ jobs:
           node-version: 18
 
       - name: Install
-        run: npm i
+        run: npm ci
 
       - name: Test and Coverage
-        run: npm run test:coverage
+        run: npm run test:coverage --workspace=maska
 
       - name: Parse coverage
         uses: sergeysova/jq-action@v2
         id: coverage
         with:
-          cmd: 'jq .total.statements.pct coverage/coverage-summary.json'
+          cmd: 'jq .total.statements.pct packages/maska/coverage/coverage-summary.json'
 
       - name: Build demo
-        run: npm run build:demo
+        run: npm run build --workspace=docs
 
       - name: Upload demo artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: ./docs
+          path: ./packages/docs/docs
 
   badge:
     runs-on: ubuntu-latest
diff --git a/Taskfile.yml b/Taskfile.yml
new file mode 100644
index 0000000..0140ec6
--- /dev/null
+++ b/Taskfile.yml
@@ -0,0 +1,15 @@
+# https://taskfile.dev
+
+version: '3'
+
+silent: true
+
+tasks:
+  dev:maska: npm run dev --workspace=packages/maska
+  dev:maska-build-watch: npm run build:watch --workspace=packages/maska
+  dev:vue: npm run dev --workspace=packages/vue
+
+  build: npm run build --workspaces
+
+  test: npm run test --workspaces
+  coverage: npm run test:coverage --workspaces
diff --git a/demo/index.ts b/demo/index.ts
deleted file mode 100644
index 3c28f8b..0000000
--- a/demo/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createApp } from 'vue'
-
-import { vMaska } from '..'
-import App from './App.vue'
-
-createApp(App)
-  .directive('maska', vMaska)
-  .mount('#demo-app')
diff --git a/package-lock.json b/package-lock.json
index cf6a8a6..fac2076 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,32 +1,13 @@
 {
   "name": "maska",
-  "version": "3.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "maska",
-      "version": "3.0.0",
-      "license": "MIT",
-      "devDependencies": {
-        "@testing-library/dom": "^10.0.0",
-        "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/node": "^20.12.7",
-        "@vitejs/plugin-vue": "^5.0.4",
-        "@vitest/coverage-v8": "^1.5.0",
-        "@vue/test-utils": "^2.4.5",
-        "happy-dom": "^14.7.1",
-        "ts-standard": "^12.0.2",
-        "typescript": "^5.4.5",
-        "vite": "^5.2.8",
-        "vite-plugin-banner": "^0.7.1",
-        "vite-plugin-dts": "^3.8.2",
-        "vitest": "^1.5.0",
-        "vue": "^3.2.45",
-        "vue-live": "^2.5.4",
-        "vue-tsc": "^2.0.13"
-      }
+      "workspaces": [
+        "packages/*",
+        "packages/docs"
+      ]
     },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
@@ -804,6 +785,10 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@maskajs/vue": {
+      "resolved": "packages/vue",
+      "link": true
+    },
     "node_modules/@microsoft/api-extractor": {
       "version": "7.43.0",
       "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.43.0.tgz",
@@ -1006,9 +991,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.2.tgz",
-      "integrity": "sha512-ahxSgCkAEk+P/AVO0vYr7DxOD3CwAQrT0Go9BJyGQ9Ef0QxVOfjDZMiF4Y2s3mLyPrjonchIMH/tbWHucJMykQ==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz",
+      "integrity": "sha512-X9alQ3XM6I9IlSlmC8ddAvMSyG1WuHk5oUnXGw+yUBs3BFoTizmG1La/Gr8fVJvDWAq+zlYTZ9DBgrlKRVY06g==",
       "cpu": [
         "arm"
       ],
@@ -1019,9 +1004,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.2.tgz",
-      "integrity": "sha512-lAarIdxZWbFSHFSDao9+I/F5jDaKyCqAPMq5HqnfpBw8dKDiCaaqM0lq5h1pQTLeIqueeay4PieGR5jGZMWprw==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.3.tgz",
+      "integrity": "sha512-eQK5JIi+POhFpzk+LnjKIy4Ks+pwJ+NXmPxOCSvOKSNRPONzKuUvWE+P9JxGZVxrtzm6BAYMaL50FFuPe0oWMQ==",
       "cpu": [
         "arm64"
       ],
@@ -1032,9 +1017,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.2.tgz",
-      "integrity": "sha512-SWsr8zEUk82KSqquIMgZEg2GE5mCSfr9sE/thDROkX6pb3QQWPp8Vw8zOq2GyxZ2t0XoSIUlvHDkrf5Gmf7x3Q==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.3.tgz",
+      "integrity": "sha512-Od4vE6f6CTT53yM1jgcLqNfItTsLt5zE46fdPaEmeFHvPs5SjZYlLpHrSiHEKR1+HdRfxuzXHjDOIxQyC3ptBA==",
       "cpu": [
         "arm64"
       ],
@@ -1045,9 +1030,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.2.tgz",
-      "integrity": "sha512-o/HAIrQq0jIxJAhgtIvV5FWviYK4WB0WwV91SLUnsliw1lSAoLsmgEEgRWzDguAFeUEUUoIWXiJrPqU7vGiVkA==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.3.tgz",
+      "integrity": "sha512-0IMAO21axJeNIrvS9lSe/PGthc8ZUS+zC53O0VhF5gMxfmcKAP4ESkKOCwEi6u2asUrt4mQv2rjY8QseIEb1aw==",
       "cpu": [
         "x64"
       ],
@@ -1058,9 +1043,22 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.2.tgz",
-      "integrity": "sha512-nwlJ65UY9eGq91cBi6VyDfArUJSKOYt5dJQBq8xyLhvS23qO+4Nr/RreibFHjP6t+5ap2ohZrUJcHv5zk5ju/g==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.3.tgz",
+      "integrity": "sha512-ge2DC7tHRHa3caVEoSbPRJpq7azhG+xYsd6u2MEnJ6XzPSzQsTKyXvh6iWjXRf7Rt9ykIUWHtl0Uz3T6yXPpKw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.14.3.tgz",
+      "integrity": "sha512-ljcuiDI4V3ySuc7eSk4lQ9wU8J8r8KrOUvB2U+TtK0TiW6OFDmJ+DdIjjwZHIw9CNxzbmXY39wwpzYuFDwNXuw==",
       "cpu": [
         "arm"
       ],
@@ -1071,9 +1069,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.2.tgz",
-      "integrity": "sha512-Pg5TxxO2IVlMj79+c/9G0LREC9SY3HM+pfAwX7zj5/cAuwrbfj2Wv9JbMHIdPCfQpYsI4g9mE+2Bw/3aeSs2rQ==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.3.tgz",
+      "integrity": "sha512-Eci2us9VTHm1eSyn5/eEpaC7eP/mp5n46gTRB3Aar3BgSvDQGJZuicyq6TsH4HngNBgVqC5sDYxOzTExSU+NjA==",
       "cpu": [
         "arm64"
       ],
@@ -1084,9 +1082,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.2.tgz",
-      "integrity": "sha512-cAOTjGNm84gc6tS02D1EXtG7tDRsVSDTBVXOLbj31DkwfZwgTPYZ6aafSU7rD/4R2a34JOwlF9fQayuTSkoclA==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.3.tgz",
+      "integrity": "sha512-UrBoMLCq4E92/LCqlh+blpqMz5h1tJttPIniwUgOFJyjWI1qrtrDhhpHPuFxULlUmjFHfloWdixtDhSxJt5iKw==",
       "cpu": [
         "arm64"
       ],
@@ -1097,9 +1095,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.2.tgz",
-      "integrity": "sha512-4RyT6v1kXb7C0fn6zV33rvaX05P0zHoNzaXI/5oFHklfKm602j+N4mn2YvoezQViRLPnxP8M1NaY4s/5kXO5cw==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.3.tgz",
+      "integrity": "sha512-5aRjvsS8q1nWN8AoRfrq5+9IflC3P1leMoy4r2WjXyFqf3qcqsxRCfxtZIV58tCxd+Yv7WELPcO9mY9aeQyAmw==",
       "cpu": [
         "ppc64"
       ],
@@ -1110,9 +1108,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.2.tgz",
-      "integrity": "sha512-KNUH6jC/vRGAKSorySTyc/yRYlCwN/5pnMjXylfBniwtJx5O7X17KG/0efj8XM3TZU7raYRXJFFReOzNmL1n1w==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.3.tgz",
+      "integrity": "sha512-sk/Qh1j2/RJSX7FhEpJn8n0ndxy/uf0kI/9Zc4b1ELhqULVdTfN6HL31CDaTChiBAOgLcsJ1sgVZjWv8XNEsAQ==",
       "cpu": [
         "riscv64"
       ],
@@ -1123,9 +1121,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.2.tgz",
-      "integrity": "sha512-xPV4y73IBEXToNPa3h5lbgXOi/v0NcvKxU0xejiFw6DtIYQqOTMhZ2DN18/HrrP0PmiL3rGtRG9gz1QE8vFKXQ==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.3.tgz",
+      "integrity": "sha512-jOO/PEaDitOmY9TgkxF/TQIjXySQe5KVYB57H/8LRP/ux0ZoO8cSHCX17asMSv3ruwslXW/TLBcxyaUzGRHcqg==",
       "cpu": [
         "s390x"
       ],
@@ -1136,9 +1134,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.2.tgz",
-      "integrity": "sha512-QBhtr07iFGmF9egrPOWyO5wciwgtzKkYPNLVCFZTmr4TWmY0oY2Dm/bmhHjKRwZoGiaKdNcKhFtUMBKvlchH+Q==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.3.tgz",
+      "integrity": "sha512-8ybV4Xjy59xLMyWo3GCfEGqtKV5M5gCSrZlxkPGvEPCGDLNla7v48S662HSGwRd6/2cSneMQWiv+QzcttLrrOA==",
       "cpu": [
         "x64"
       ],
@@ -1149,9 +1147,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.2.tgz",
-      "integrity": "sha512-8zfsQRQGH23O6qazZSFY5jP5gt4cFvRuKTpuBsC1ZnSWxV8ZKQpPqOZIUtdfMOugCcBvFGRa1pDC/tkf19EgBw==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.3.tgz",
+      "integrity": "sha512-s+xf1I46trOY10OqAtZ5Rm6lzHre/UiLA1J2uOhCFXWkbZrJRkYBPO6FhvGfHmdtQ3Bx793MNa7LvoWFAm93bg==",
       "cpu": [
         "x64"
       ],
@@ -1162,9 +1160,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.2.tgz",
-      "integrity": "sha512-H4s8UjgkPnlChl6JF5empNvFHp77Jx+Wfy2EtmYPe9G22XV+PMuCinZVHurNe8ggtwoaohxARJZbaH/3xjB/FA==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.3.tgz",
+      "integrity": "sha512-+4h2WrGOYsOumDQ5S2sYNyhVfrue+9tc9XcLWLh+Kw3UOxAvrfOrSMFon60KspcDdytkNDh7K2Vs6eMaYImAZg==",
       "cpu": [
         "arm64"
       ],
@@ -1175,9 +1173,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.2.tgz",
-      "integrity": "sha512-djqpAjm/i8erWYF0K6UY4kRO3X5+T4TypIqw60Q8MTqSBaQNpNXDhxdjpZ3ikgb+wn99svA7jxcXpiyg9MUsdw==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.3.tgz",
+      "integrity": "sha512-T1l7y/bCeL/kUwh9OD4PQT4aM7Bq43vX05htPJJ46RTI4r5KNt6qJRzAfNfM+OYMNEVBWQzR2Gyk+FXLZfogGw==",
       "cpu": [
         "ia32"
       ],
@@ -1188,9 +1186,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.2.tgz",
-      "integrity": "sha512-teAqzLT0yTYZa8ZP7zhFKEx4cotS8Tkk5XiqNMJhD4CpaWB1BHARE4Qy+RzwnXvSAYv+Q3jAqCVBS+PS+Yee8Q==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.3.tgz",
+      "integrity": "sha512-/BypzV0H1y1HzgYpxqRaXGBRqfodgoBBCcsrujT6QRcakDQdfU+Lq9PENPh5jB4I44YWq+0C2eHsHya+nZY1sA==",
       "cpu": [
         "x64"
       ],
@@ -2738,6 +2736,10 @@
         "node": ">=8"
       }
     },
+    "node_modules/docs": {
+      "resolved": "packages/docs",
+      "link": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5025,6 +5027,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/maska": {
+      "resolved": "packages/maska",
+      "link": true
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5971,9 +5977,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.2.tgz",
-      "integrity": "sha512-WkeoTWvuBoFjFAhsEOHKRoZ3r9GfTyhh7Vff1zwebEFLEFjT1lG3784xEgKiTa7E+e70vsC81roVL2MP4tgEEQ==",
+      "version": "4.14.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz",
+      "integrity": "sha512-ag5tTQKYsj1bhrFC9+OEWqb5O6VYgtQDO9hPDBMmIbePwhfSr+ExlcU741t8Dhw5DkPCQf6noz0jb36D6W9/hw==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -5986,21 +5992,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.14.2",
-        "@rollup/rollup-android-arm64": "4.14.2",
-        "@rollup/rollup-darwin-arm64": "4.14.2",
-        "@rollup/rollup-darwin-x64": "4.14.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.14.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.14.2",
-        "@rollup/rollup-linux-arm64-musl": "4.14.2",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.14.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.14.2",
-        "@rollup/rollup-linux-x64-gnu": "4.14.2",
-        "@rollup/rollup-linux-x64-musl": "4.14.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.14.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.14.2",
-        "@rollup/rollup-win32-x64-msvc": "4.14.2",
+        "@rollup/rollup-android-arm-eabi": "4.14.3",
+        "@rollup/rollup-android-arm64": "4.14.3",
+        "@rollup/rollup-darwin-arm64": "4.14.3",
+        "@rollup/rollup-darwin-x64": "4.14.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.14.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.14.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.14.3",
+        "@rollup/rollup-linux-arm64-musl": "4.14.3",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.14.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.14.3",
+        "@rollup/rollup-linux-x64-gnu": "4.14.3",
+        "@rollup/rollup-linux-x64-musl": "4.14.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.14.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.14.3",
+        "@rollup/rollup-win32-x64-msvc": "4.14.3",
         "fsevents": "~2.3.2"
       }
     },
@@ -6774,9 +6781,9 @@
       "dev": true
     },
     "node_modules/tinypool": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.3.tgz",
-      "integrity": "sha512-Ud7uepAklqRH1bvwy22ynrliC7Dljz7Tm8M/0RBUW+YRa4YHhZ6e4PpgE+fu1zr/WqB1kbeuVrdfeuyIBpy4tw==",
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
+      "integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -7137,9 +7144,9 @@
       "dev": true
     },
     "node_modules/vite-plugin-dts": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.8.2.tgz",
-      "integrity": "sha512-GPkLNBUU+ztskHj37nelNsgRLurFuqXxqICSd/IxjRmgee1T6IIYlRCanugc9QtgWjYVPC/HJzSfpXJSy9OLUA==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.8.3.tgz",
+      "integrity": "sha512-yRHiRosQw7MXdOhmcrVI+kRiB8YEShbSxnADNteK4eZGdEoyOkMHihvO5XOAVlOq8ng9sIqu8vVefDK1zcj3qw==",
       "dev": true,
       "dependencies": {
         "@microsoft/api-extractor": "7.43.0",
@@ -7750,6 +7757,57 @@
       "engines": {
         "node": "^12.20.0 || >=14"
       }
+    },
+    "packages/docs": {
+      "devDependencies": {
+        "@types/node": "^20.12.7",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.8",
+        "vue": "^3.2.45",
+        "vue-live": "^2.5.4"
+      }
+    },
+    "packages/maska": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/node": "^20.12.7",
+        "@vitest/coverage-v8": "^1.5.0",
+        "happy-dom": "^14.7.1",
+        "ts-standard": "^12.0.2",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.8",
+        "vite-plugin-banner": "^0.7.1",
+        "vite-plugin-dts": "^3.8.2",
+        "vitest": "^1.5.0"
+      }
+    },
+    "packages/vue": {
+      "name": "@maskajs/vue",
+      "version": "3.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/node": "^20.12.7",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "@vitest/coverage-v8": "^1.5.0",
+        "@vue/test-utils": "^2.4.5",
+        "happy-dom": "^14.7.1",
+        "ts-standard": "^12.0.2",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.8",
+        "vite-plugin-banner": "^0.7.1",
+        "vite-plugin-dts": "^3.8.2",
+        "vitest": "^1.5.0",
+        "vue": "^3.2.45",
+        "vue-tsc": "^2.0.13"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index f966f84..574898b 100644
--- a/package.json
+++ b/package.json
@@ -1,59 +1,7 @@
 {
-  "name": "maska",
-  "version": "3.0.0",
-  "description": "Simple zero-dependency input mask for Vue or Vanilla JS",
-  "keywords": [
-    "mask",
-    "inputmask",
-    "vue"
-  ],
-  "author": "Alexander Shabunevich",
-  "homepage": "https://beholdr.github.io/maska/",
-  "repository": {
-    "url": "https://github.com/beholdr/maska",
-    "type": "git"
-  },
-  "license": "MIT",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/maska.umd.js",
-  "module": "./dist/maska.mjs",
-  "types": "./dist/maska.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/maska.d.ts",
-      "import": "./dist/maska.mjs",
-      "require": "./dist/maska.umd.js"
-    }
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "build:demo": "vite build --config vite.config.demo.mts",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "lint": "ts-standard src",
-    "lint:fix": "ts-standard --fix src",
-    "version": "npm run build && npm test"
-  },
-  "devDependencies": {
-    "@testing-library/dom": "^10.0.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.12.7",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.5.0",
-    "@vue/test-utils": "^2.4.5",
-    "happy-dom": "^14.7.1",
-    "ts-standard": "^12.0.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.8",
-    "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "^3.8.2",
-    "vitest": "^1.5.0",
-    "vue": "^3.2.45",
-    "vue-live": "^2.5.4",
-    "vue-tsc": "^2.0.13"
-  }
+  "private": true,
+  "workspaces": [
+    "packages/*",
+    "packages/docs"
+  ]
 }
diff --git a/docs/README.md b/packages/docs/docs/README.md
similarity index 98%
rename from docs/README.md
rename to packages/docs/docs/README.md
index 41756fb..4def345 100644
--- a/docs/README.md
+++ b/packages/docs/docs/README.md
@@ -1,8 +1,8 @@
-<object data="maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
+<object data="/maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
 
 ---
 
-# Support
+# Maska {{versionLabel}}
 
 Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
 
@@ -12,7 +12,7 @@ Here are several examples of basic masks that you could create with **Maska**.
 This demo is interactive: feel free to edit the examples.
 
 <div id="demo-app"></div>
-<script src="dist/demo.js"></script>
+<script type="module" src="dist/demo.js"></script>
 
 # Install
 
diff --git a/docs/index.html b/packages/docs/docs/index.html
similarity index 82%
rename from docs/index.html
rename to packages/docs/docs/index.html
index f45dfc2..4983fff 100644
--- a/docs/index.html
+++ b/packages/docs/docs/index.html
@@ -4,14 +4,16 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
-  <title>maska docs</title>
+  <title>maska v3 docs</title>
 
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22128%22>*️⃣</text></svg>">
 
   <!-- Themes (light + dark) -->
   <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
   <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
-  <link rel="stylesheet" href="dist/demo.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
+
+  <link rel="stylesheet" href="dist/style.css">
 
   <style>
     :root {
@@ -50,13 +52,19 @@
   window.$docsify = {
     name: 'maska',
     repo: 'beholdr/maska',
-    maxLevel: 2
+    maxLevel: 2,
+    versionSelectorLabel: 'Version',
+    versions: [
+      { folder: '#', label: 'v3.x', default: true },
+      { folder: 'v2', label: 'v2.x', default: false }
+    ]
   }
   </script>
 
   <!-- Required -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/index.js"></script>
 
   <!-- Recommended -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
diff --git a/docs/maska.svg b/packages/docs/docs/maska.svg
similarity index 100%
rename from docs/maska.svg
rename to packages/docs/docs/maska.svg
diff --git a/packages/docs/docs/v2/README.md b/packages/docs/docs/v2/README.md
new file mode 100644
index 0000000..7057e3d
--- /dev/null
+++ b/packages/docs/docs/v2/README.md
@@ -0,0 +1,572 @@
+<object data="/maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
+
+---
+
+# Maska {{versionLabel}}
+
+Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
+
+# Live Demo
+
+Here are several examples of basic masks that you could create with **Maska**.
+This demo is interactive: feel free to edit the examples.
+
+<div id="demo-app"></div>
+<script type="module" src="../dist/demo_v2.js"></script>
+
+# Install
+
+<!-- tabs:start -->
+## **Via npm**
+
+```
+npm i maska
+```
+
+## **CDN / Global build**
+
+You can use **Maska** directly from CDN with simple script tag.
+Library API will be exposed on the global `Maska` object:
+
+``` html
+<script src="https://cdn.jsdelivr.net/npm/maska@2/dist/maska.umd.js"></script>
+<script>
+  const { Mask, MaskInput, vMaska } = Maska
+
+  new MaskInput("[data-maska]") // for masked input
+  const mask = new Mask({ mask: "#-#" }) // for programmatic use
+  Vue.createApp({ directives: { maska: vMaska }}).mount('#app') // Vue directive
+</script>
+```
+
+## **CDN / ES modules**
+
+For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
+
+``` html
+<script type="importmap">
+  {
+    "imports": {
+      "maska": "https://cdn.jsdelivr.net/npm/maska@2/dist/maska.js"
+    }
+  }
+</script>
+<script type="module">
+  import { Mask, MaskInput, vMaska } from 'maska'
+
+  new MaskInput("[data-maska]") // for masked input
+  const mask = new Mask({ mask: "#-#" }) // for programmatic use
+  Vue.createApp({ directives: { maska: vMaska }}).mount('#app') // Vue directive
+</script>
+```
+
+Notice that we are using `<script type="module">` in this case.
+<!-- tabs:end -->
+
+# Usage
+
+**Maska** library consists of three main components:
+
+- `Mask` class to mask string values
+- `MaskInput` class to apply `Mask` processing to `<input>`
+- `vMaska` directive to simplify using of library within Vue components
+
+<!-- tabs:start -->
+## **Vanilla JS**
+
+Start with simple input element and `data-maska` attribute:
+
+``` html
+<input data-maska="#-#">
+```
+
+Then import and init `MaskInput`, passing input element(s) or `querySelector` expression as first argument:
+
+``` ts
+import { MaskInput } from "maska"
+new MaskInput("[data-maska]")
+```
+
+Usually you set mask via `data-maska` attribute. But you can pass mask and other [options](#options) via second argument (it will be a default options that can be overriden by `data-maska-` attributes):
+
+``` ts
+new MaskInput("input", { mask: "#-#" })
+```
+
+To destroy mask use `destroy()` method:
+
+``` ts
+const mask = new MaskInput(...)
+mask.destroy()
+```
+
+## **Vue**
+
+Import `vMaska` directive and apply it to the input along with `data-maska` attribite:
+
+<!-- tabs:start -->
+### **Composition API**
+
+``` html
+<script setup>
+import { vMaska } from "maska"
+</script>
+
+<template>
+  <input v-maska data-maska="#-#">
+</template>
+```
+
+### **Options API**
+
+``` html
+<script>
+import { vMaska } from "maska"
+
+export default {
+  directives: { maska: vMaska }
+}
+</script>
+
+<template>
+  <input v-maska data-maska="#-#">
+</template>
+```
+<!-- tabs:end -->
+
+### Bind value
+
+To get masked value you can use standard `v-model` directive.
+But if you want to access an unmasked (raw) value, you can pass a variable as `v-maska` directive value.
+This variable should be a reactive object that will contains three fields after mask processing:
+
+- `masked`: string with masked result
+- `unmasked`: string with unmasked result
+- `completed`: boolean flag indicating that mask is completed
+
+<!-- tabs:start -->
+### **Composition API**
+
+``` html
+<script setup>
+import { reactive, ref } from "vue"
+import { vMaska } from "maska"
+
+const maskedValue = ref('')
+const boundObject = reactive({})
+</script>
+
+<template>
+  <input v-maska="boundObject" v-model="maskedValue">
+
+  Masked value: {{ maskedValue }} or {{ boundObject.masked }}
+  Unmasked value: {{ boundObject.unmasked }}
+  <span v-if="boundObject.completed">✅ Mask completed</span>
+</template>
+```
+
+### **Options API**
+
+``` html
+<script>
+import { vMaska } from "maska"
+
+export default {
+  directives: { maska: vMaska },
+  data: () => ({
+    maskedValue: "",
+    boundObject: {
+      masked: "",
+      unmasked: "",
+      completed: false
+    }
+  })
+}
+</script>
+
+<template>
+  <input v-maska="boundObject" v-model="maskedValue">
+
+  Masked value: {{ maskedValue }} or {{ boundObject.masked }}
+  Unmasked value: {{ boundObject.unmasked }}
+  <span v-if="boundObject.completed">✅ Mask completed</span>
+</template>
+```
+<!-- tabs:end -->
+
+### Set mask options
+
+To set default options for the mask you could use directive *argument* (part after `v-maska:`). It can be plain or reactive object and should be wrapped in `[]`:
+
+<!-- tabs:start -->
+### **Composition API**
+
+``` html
+<script setup>
+import { reactive } from "vue"
+import { vMaska } from "maska"
+
+const options = reactive({
+  mask: "#-#",
+  eager: true
+})
+</script>
+
+<template>
+  <input v-maska:[options]>
+</template>
+```
+
+### **Options API**
+
+``` html
+<script>
+import { vMaska } from "maska"
+
+export default {
+  directives: { maska: vMaska },
+  data: () => ({
+    options: {
+      mask: "#-#",
+      eager: true
+    }
+  })
+}
+</script>
+
+<template>
+  <input v-maska:[options]>
+</template>
+```
+<!-- tabs:end -->
+
+?> Please see [issue#149](https://github.com/beholdr/maska/issues/149): options object should be assigned in the current file.
+
+You can set options and bind to an object at the same time:
+
+``` html
+<input v-maska:[options]="boundObject">
+```
+
+#### Global registration of directive
+
+<!-- tabs:start -->
+### **Vue 3**
+
+``` ts
+import { createApp } from "vue"
+import { vMaska } from "maska"
+
+createApp({}).directive("maska", vMaska)
+
+// or in case of CDN load
+Vue.createApp({}).directive("maska", Maska.vMaska)
+```
+
+### **Vue 2**
+
+``` ts
+import Vue from "vue"
+import { vMaska } from "maska"
+
+Vue.directive("maska", vMaska)
+
+// or in case of CDN load
+Vue.directive("maska", Maska.vMaska)
+```
+<!-- tabs:end -->
+
+## **Nuxt 3**
+
+To use Maska in Nuxt 3 you can make a simple plugin. Create file `maska.ts` in `plugins` folder:
+
+``` ts
+import { vMaska } from "maska"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("maska", vMaska)
+})
+```
+
+Now you can use `v-maska` directive in your app:
+
+``` html
+<input v-model="value" v-maska data-maska="#-#" />
+```
+<!-- tabs:end -->
+
+# Options
+
+## `Mask` options
+
+Every option of `Mask` class can be set via `data-maska-` attributes or by passing on init.
+Options passed on init will be used as defaults and could be overriden by `data-maska-` attributes.
+
+<!-- tabs:start -->
+### **Description**
+
+- `mask / data-maska` — mask to apply (**string**, **array of strings** or **function**). If you pass empty string or `null` it will disable a mask
+- `tokens / data-maska-tokens` — custom tokens object
+- `tokensReplace / data-maska-tokens-replace` — if custom tokens should replace default tokens (if not set, they will merge)
+- `eager / data-maska-eager` — eager mode will show static characters before you type them, e.g. when you type `1`, eager mask `#-#` will show `1-` and non-eager will show `1`
+- `reversed / data-maska-reversed` — in reversed mode mask will grow backwards, e.g. for numbers
+
+### **Types**
+``` ts
+interface MaskOptions {
+  mask?: MaskType
+  tokens?: MaskTokens
+  tokensReplace?: boolean
+  eager?: boolean
+  reversed?: boolean
+}
+```
+<!-- tabs:end -->
+
+``` html
+<input data-maska="A-A" data-maska-tokens="A:[A-Z]" data-maska-eager>
+```
+
+## `MaskInput` options
+
+`MaskInput` options could be set only by passing second argument on init.
+Along with `MaskInput` options you could pass any `Mask` options as well (or set them via `data-maska-` attributes).
+
+<!-- tabs:start -->
+### **Description**
+
+- `onMaska` — [callback](#events) on every mask processing
+- `preProcess` — [hook](#hooks) before mask processing
+- `postProcess` — [hook](#hooks) after mask processing
+
+### **Types**
+``` ts
+interface MaskInputOptions extends MaskOptions {
+  onMaska?: (detail: MaskaDetail) => void
+  preProcess?: (value: string) => string
+  postProcess?: (value: string) => string
+}
+```
+<!-- tabs:end -->
+
+``` ts
+new MaskInput("input", {
+  mask: "#-#",
+  reversed: true,
+  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
+})
+```
+
+# Tokens
+
+There are 3 tokens defined by default:
+
+``` ts
+{
+  '#': { pattern: /[0-9]/ },       // digits
+  '@': { pattern: /[a-zA-Z]/ },    // letters
+  '*': { pattern: /[a-zA-Z0-9]/ }, // letters & digits
+}
+```
+
+?> Use `!` before token to escape symbol. For example `!#` will render `#` instead of a digit.
+
+## Custom tokens
+
+Add custom tokens via `data-maska-tokens` attribute or by `tokens` option:
+
+<!-- tabs:start -->
+### **By data-attr**
+
+When using `data-maska-tokens`, there are two possible formats:
+
+- **Full form** should be a valid JSON-string (but can use both single and double quotes) with pattern in string format without delimiters
+- **Simple form** should be a string in format: `T:P:M|T:P:M` where:
+  - `T` is token
+  - `P` is pattern in string form
+  - `M` is optional modifier (see below)
+  - `|` is separator for multiple tokens
+
+``` html
+<input data-maska="Z-Z" data-maska-tokens="{ 'Z': { 'pattern': '[A-Z]' }}">
+<input data-maska="Z-Z" data-maska-tokens="Z:[A-Z]">
+<input data-maska="Z-z" data-maska-tokens="Z:[A-Z]|z:[a-z]:multiple">
+```
+
+?> You can’t set `transform` function for token via `data-maska-tokens`.
+If you need this, use `tokens` option instead.
+
+### **By option**
+
+When using `tokens` option, pattern should be a valid regular expression object:
+
+``` ts
+new MaskInput("[data-maska]", {
+  mask: "A-A",
+  tokens: {
+    A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
+  }
+})
+```
+<!-- tabs:end -->
+
+## Token modifiers
+
+Every token can have a modifier, for example:
+
+``` ts
+{
+  0: { pattern: /[0-9]/, optional: true },
+  9: { pattern: /[0-9]/, repeated: true },
+}
+```
+
+- `optional` for optional token
+- `multiple` for token that can match multiple characters till the next token starts
+- `repeated` for tokens that should be repeated. This token will match only one character, but the token itself (or group of such tokens) can be repeated any number of times
+
+| Modifier   | Example usage    | Mask                               | Tokens
+| ---        | ---              | ---                                | ---
+| `optional` | IP address       | `#00.#00.#00.#00`                  | `0:[0-9]:optional`
+| `multiple` | CARDHOLDER NAME  | `A A`                              | `A:[A-Z]:multiple`
+| `repeated` | Money (1 234,56) | `9 99#,##` <small>reversed</small> | `9:[0-9]:repeated`
+
+## Transform tokens
+
+For custom tokens you can define `transform` function, applied to a character before masking.
+For example, transforming letters to uppercase on input:
+
+``` ts
+{
+  A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
+}
+```
+
+?> You can also use [hooks](#hooks) for transforming whole value before/after masking.
+
+# Dynamic masks
+
+Pass `mask` as **array** or **function** to make it dynamic:
+
+- With **array** a suitable mask will be chosen by length (smallest first)
+- With **function** you can select mask with custom logic using value
+
+``` ts
+new MaskInput("input", {
+  mask: (value: string) => value.startsWith('1') ? '#-#' : '##-##'
+})
+```
+
+# Hooks
+
+Use hooks for transforming whole value:
+
+- `preProcess` hook called before mask processing
+- `postProcess` hook called after mask processing, but before setting input's value
+
+For example, you can use it to check for a maximum length of masked string:
+
+``` ts
+new MaskInput("input", {
+  postProcess: (value: string) => value.slice(0, 5)
+})
+```
+
+# Events
+
+There are two events you can subscribe to get the masking result:
+
+- `maska` event
+- `input` event
+
+They are essentially the same, but the `input` event could be fired by any input logic, and the `maska` event is library specific.
+
+<!-- tabs:start -->
+## **Vanilla JS**
+
+``` ts
+document.querySelector("input").addEventListener("maska", onMaska)
+```
+
+## **Vue**
+
+``` html
+<input v-maska data-maska="#-#" @maska="onMaska" />
+```
+<!-- tabs:end -->
+
+Both events contains `detail` property with given structure:
+
+<!-- tabs:start -->
+### **Description**
+
+- `masked`: masked value
+- `unmasked`: unmasked value
+- `completed`: flag that current mask is completed
+
+### **Types**
+``` ts
+interface MaskaDetail {
+  masked: string
+  unmasked: string
+  completed: boolean
+}
+```
+<!-- tabs:end -->
+
+``` ts
+const onMaska = (event: CustomEvent<MaskaDetail>) => {
+  console.log({
+    masked: event.detail.masked,
+    unmasked: event.detail.unmasked,
+    completed: event.detail.completed
+  })
+}
+```
+
+Alternatively, you can pass callback function directly with `MaskInput` option `onMaska`:
+
+<!-- tabs:start -->
+### **Vanilla JS**
+``` ts
+new MaskInput("input", {
+  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
+})
+```
+
+### **Vue**
+``` html
+<script setup>
+const options = {
+  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
+}
+</script>
+
+<template>
+  <input v-maska:[options]>
+</template>
+```
+<!-- tabs:end -->
+
+# Programmatic use
+
+You can use mask function programmatically by importing `Mask` class.
+There are three methods available:
+
+- `masked(value)` returns masked version of given value
+- `unmasked(value)` returns unmasked version of given value
+- `completed(value)` returns `true` if given value makes mask complete
+
+``` ts
+import { Mask } from "maska"
+
+const mask = new Mask({ mask: "#-#" })
+
+mask.masked("12") // = 1-2
+mask.unmasked("12") // = 12
+mask.completed("12") // = true
+```
+
+# Known issues
+
+When used on input of type `number`, could have inconsistent behavior in different browsers. Use attribute `inputmode="numeric"` with `type="text"` if you need a numeric keyboard.
diff --git a/packages/docs/docs/v2/index.html b/packages/docs/docs/v2/index.html
new file mode 100644
index 0000000..ad913d0
--- /dev/null
+++ b/packages/docs/docs/v2/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+  <title>maska v2 docs</title>
+
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22128%22>*️⃣</text></svg>">
+
+  <!-- Themes (light + dark) -->
+  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
+  <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
+
+  <link rel="stylesheet" href="../dist/style.css">
+
+  <style>
+    :root {
+      --theme-hue: 281;
+      --heading-h1-font-size: var(--modular-scale-3);
+      --heading-h2-font-size: var(--modular-scale-2);
+      --heading-h3-font-size: var(--modular-scale-1);
+    }
+
+    .sidebar > .app-name {
+      display: none;
+    }
+    .sidebar-nav li.active {
+      background: #990bdb;
+      color: #fff;
+      margin-left: -10px;
+      padding-left: 10px;
+      border-radius: 2px;
+    }
+    .sidebar-nav li.active a {
+      color: #fff;
+    }
+
+    @media screen and (max-width: 500px) {
+      .markdown-section {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script>
+  window.$docsify = {
+    name: 'maska',
+    repo: 'beholdr/maska',
+    maxLevel: 2,
+    versionSelectorLabel: 'Version',
+    versions: [
+      { folder: '#', label: 'v3.x', default: true },
+      { folder: 'v2', label: 'v2.x', default: false }
+    ]
+  }
+  </script>
+
+  <!-- Required -->
+  <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/index.js"></script>
+
+  <!-- Recommended -->
+  <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.min.js"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/maska@2/dist/maska.umd.js"></script>
+</body>
+</html>
diff --git a/packages/docs/package.json b/packages/docs/package.json
new file mode 100644
index 0000000..97a2c45
--- /dev/null
+++ b/packages/docs/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "echo 'No tests, skip'",
+    "test:coverage": "echo 'No tests, skip'",
+    "lint": "echo 'No linting, skip'",
+    "lint:fix": "echo 'No linting, skip'",
+    "version": "echo 'No version, skip'"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vue": "^3.2.45",
+    "vue-live": "^2.5.4"
+  }
+}
diff --git a/demo/App.vue b/packages/docs/src/App.vue
similarity index 57%
rename from demo/App.vue
rename to packages/docs/src/App.vue
index 0b88ca4..872ceed 100644
--- a/demo/App.vue
+++ b/packages/docs/src/App.vue
@@ -4,55 +4,10 @@ import { computed, ref } from 'vue'
 import { VueLive } from 'vue-live'
 import 'vue-live/style.css'
 
-const examples = [
-  {
-    label: 'Simple mask',
-    code: `<input v-maska data-maska="#-#" value="12">`
-  },
-  {
-    label: 'Phone mask',
-    code: `<input v-maska data-maska="+1 ### ###-##-##">`
-  },
-  {
-    label: 'HEX-color',
-    code: `<input\n  v-maska\n  data-maska="!#HHHHHH"\n  data-maska-tokens="H:[0-9a-fA-F]"\n>`
-  },
-  {
-    label: 'IP address with optional digits',
-    code: `<input\n  v-maska\n  data-maska="#00.#00.#00.#00"\n  data-maska-tokens="0:[0-9]:optional"\n>`
-  },
-  {
-    label: 'Dynamic mask: CPF/CNPJ',
-    code: `<input\n  v-maska\n  data-maska="[\n    '###.###.###-##',\n    '##.###.###/####-##'\n  ]"\n>`
-  },
-  {
-    label: 'Cardholder name: via hook',
-    code: `const options = {\n  preProcess: val => val.toUpperCase()\n}\n\n<input\n  v-maska:[options]\n  data-maska="A A"\n  data-maska-tokens="A:[A-Z]:multiple"\n>`
-  },
-  {
-    label: 'Cardholder name: via token transform',
-    code: `const options = {\n  tokens: {\n    A: {\n      pattern: /[A-Z]/,\n      multiple: true,\n      transform: chr => chr.toUpperCase()\n    }\n  }\n}\n\n<input v-maska:[options] data-maska="A A">`
-  },
-  {
-    label: 'Year: with current year as a limit',
-    code: `const options = {\n  postProcess: val => {\n    const max = "" + new Date().getFullYear()\n    return val > max ? max : val\n  }\n}\n\n<input v-maska:[options] data-maska="####">`
-  },
-  {
-    label: 'Money format: simple',
-    code: `<input\n  v-maska\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
-  },
-  {
-    label: 'Money format: full via hooks',
-    code: `const options = {\n  preProcess: val => val.replace(/[$,]/g, ''),\n  postProcess: val => {\n    if (!val) return ''\n\n    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n    return Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD'\n    }).format(val)\n      .slice(0, sub ? -sub : undefined)\n  }\n}\n\n<input\n  v-maska:[options]\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
-  },
-  {
-    label: 'Reversed number format with thousand separators',
-    code: `<input\n  v-maska\n  data-maska="9 99#.##"\n  data-maska-tokens="9:[0-9]:repeated"\n  data-maska-reversed\n>`
-  }
-]
+const props = defineProps(['examples'])
 
 const selectedExample = ref(0)
-const code = computed(() => examples[selectedExample.value].code)
+const code = computed(() => props.examples[selectedExample.value].code)
 </script>
 
 <template>
diff --git a/packages/docs/src/index.ts b/packages/docs/src/index.ts
new file mode 100644
index 0000000..f04cbe2
--- /dev/null
+++ b/packages/docs/src/index.ts
@@ -0,0 +1,55 @@
+import { createApp } from 'vue'
+
+import { vMaska } from '../../vue/src'
+import App from './App.vue'
+
+const examples = [
+  {
+    label: 'Simple mask',
+    code: `<input v-maska data-maska="#-#" value="12">`
+  },
+  {
+    label: 'Phone mask',
+    code: `<input v-maska data-maska="+1 ### ###-##-##">`
+  },
+  {
+    label: 'HEX-color',
+    code: `<input\n  v-maska\n  data-maska="!#HHHHHH"\n  data-maska-tokens="H:[0-9a-fA-F]"\n>`
+  },
+  {
+    label: 'IP address with optional digits',
+    code: `<input\n  v-maska\n  data-maska="#00.#00.#00.#00"\n  data-maska-tokens="0:[0-9]:optional"\n>`
+  },
+  {
+    label: 'Dynamic mask: CPF/CNPJ',
+    code: `<input\n  v-maska\n  data-maska="[\n    '###.###.###-##',\n    '##.###.###/####-##'\n  ]"\n>`
+  },
+  {
+    label: 'Cardholder name: via hook',
+    code: `const options = {\n  preProcess: val => val.toUpperCase()\n}\n\n<input\n  v-maska="options"\n  data-maska="A A"\n  data-maska-tokens="A:[A-Z]:multiple"\n>`
+  },
+  {
+    label: 'Cardholder name: via token transform',
+    code: `const options = {\n  tokens: {\n    A: {\n      pattern: /[A-Z]/,\n      multiple: true,\n      transform: chr => chr.toUpperCase()\n    }\n  }\n}\n\n<input v-maska="options" data-maska="A A">`
+  },
+  {
+    label: 'Year: with current year as a limit',
+    code: `const options = {\n  postProcess: val => {\n    const max = "" + new Date().getFullYear()\n    return val > max ? max : val\n  }\n}\n\n<input v-maska="options" data-maska="####">`
+  },
+  {
+    label: 'Money format: simple',
+    code: `<input\n  v-maska\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
+  },
+  {
+    label: 'Money format: full via hooks',
+    code: `const options = {\n  preProcess: val => val.replace(/[$,]/g, ''),\n  postProcess: val => {\n    if (!val) return ''\n\n    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n    return Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD'\n    }).format(val)\n      .slice(0, sub ? -sub : undefined)\n  }\n}\n\n<input\n  v-maska="options"\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
+  },
+  {
+    label: 'Reversed number format with thousand separators',
+    code: `<input\n  v-maska\n  data-maska="9 99#.##"\n  data-maska-tokens="9:[0-9]:repeated"\n  data-maska-reversed\n>`
+  }
+]
+
+createApp(App, { examples })
+  .directive('maska', vMaska)
+  .mount('#demo-app')
diff --git a/packages/docs/src/v2/index.ts b/packages/docs/src/v2/index.ts
new file mode 100644
index 0000000..6e84e1b
--- /dev/null
+++ b/packages/docs/src/v2/index.ts
@@ -0,0 +1,54 @@
+import { createApp } from 'vue'
+
+import App from '../App.vue'
+
+const examples = [
+  {
+    label: 'Simple mask',
+    code: `<input v-maska data-maska="#-#" value="12">`
+  },
+  {
+    label: 'Phone mask',
+    code: `<input v-maska data-maska="+1 ### ###-##-##">`
+  },
+  {
+    label: 'HEX-color',
+    code: `<input\n  v-maska\n  data-maska="!#HHHHHH"\n  data-maska-tokens="H:[0-9a-fA-F]"\n>`
+  },
+  {
+    label: 'IP address with optional digits',
+    code: `<input\n  v-maska\n  data-maska="#00.#00.#00.#00"\n  data-maska-tokens="0:[0-9]:optional"\n>`
+  },
+  {
+    label: 'Dynamic mask: CPF/CNPJ',
+    code: `<input\n  v-maska\n  data-maska="[\n    '###.###.###-##',\n    '##.###.###/####-##'\n  ]"\n>`
+  },
+  {
+    label: 'Cardholder name: via hook',
+    code: `const options = {\n  preProcess: val => val.toUpperCase()\n}\n\n<input\n  v-maska:[options]\n  data-maska="A A"\n  data-maska-tokens="A:[A-Z]:multiple"\n>`
+  },
+  {
+    label: 'Cardholder name: via token transform',
+    code: `const options = {\n  tokens: {\n    A: {\n      pattern: /[A-Z]/,\n      multiple: true,\n      transform: chr => chr.toUpperCase()\n    }\n  }\n}\n\n<input v-maska:[options] data-maska="A A">`
+  },
+  {
+    label: 'Year: with current year as a limit',
+    code: `const options = {\n  postProcess: val => {\n    const max = "" + new Date().getFullYear()\n    return val > max ? max : val\n  }\n}\n\n<input v-maska:[options] data-maska="####">`
+  },
+  {
+    label: 'Money format: simple',
+    code: `<input\n  v-maska\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
+  },
+  {
+    label: 'Money format: full via hooks',
+    code: `const options = {\n  preProcess: val => val.replace(/[$,]/g, ''),\n  postProcess: val => {\n    if (!val) return ''\n\n    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n    return Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD'\n    }).format(val)\n      .slice(0, sub ? -sub : undefined)\n  }\n}\n\n<input\n  v-maska:[options]\n  data-maska="0.99"\n  data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
+  },
+  {
+    label: 'Reversed number format with thousand separators',
+    code: `<input\n  v-maska\n  data-maska="9 99#.##"\n  data-maska-tokens="9:[0-9]:repeated"\n  data-maska-reversed\n>`
+  }
+]
+
+createApp(App, { examples })
+  .directive('maska', Maska.vMaska)
+  .mount('#demo-app')
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
new file mode 100644
index 0000000..5e10d92
--- /dev/null
+++ b/packages/docs/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/vite.config.demo.mts b/packages/docs/vite.config.mts
similarity index 78%
rename from vite.config.demo.mts
rename to packages/docs/vite.config.mts
index ceed889..58c26bd 100644
--- a/vite.config.demo.mts
+++ b/packages/docs/vite.config.mts
@@ -5,9 +5,11 @@ export default defineConfig({
   base: '',
   build: {
     outDir: 'docs/dist',
+    cssCodeSplit: false,
     rollupOptions: {
       input: {
-        demo: 'demo/index.ts'
+        demo: 'src/index.ts',
+        demo_v2: 'src/v2/index.ts'
       },
       output: {
         entryFileNames: '[name].js',
diff --git a/packages/maska/index.html b/packages/maska/index.html
new file mode 100644
index 0000000..84a5409
--- /dev/null
+++ b/packages/maska/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Maska Demo</title>
+</head>
+<body>
+  <div id="app">
+    <input data-maska="#-#">
+  </div>
+
+  <script type="module">
+    import { MaskInput } from './src'
+
+    new MaskInput('[data-maska]')
+  </script>
+</body>
+</html>
diff --git a/packages/maska/package.json b/packages/maska/package.json
new file mode 100644
index 0000000..5924079
--- /dev/null
+++ b/packages/maska/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "maska",
+  "version": "3.0.0-beta",
+  "description": "Simple zero-dependency input mask for Vanilla JS",
+  "keywords": [
+    "mask",
+    "inputmask",
+    "vue"
+  ],
+  "author": "Alexander Shabunevich",
+  "homepage": "https://beholdr.github.io/maska/",
+  "repository": {
+    "url": "https://github.com/beholdr/maska",
+    "type": "git",
+    "directory": "packages/maska"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/maska.umd.js",
+  "module": "./dist/maska.mjs",
+  "types": "./dist/maska.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/maska.d.ts",
+      "import": "./dist/maska.mjs",
+      "require": "./dist/maska.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:watch": "vite build --watch",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "lint": "ts-standard src",
+    "lint:fix": "ts-standard --fix src",
+    "version": "npm run build && npm test"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.12.7",
+    "@vitest/coverage-v8": "^1.5.0",
+    "happy-dom": "^14.7.1",
+    "ts-standard": "^12.0.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-banner": "^0.7.1",
+    "vite-plugin-dts": "^3.8.2",
+    "vitest": "^1.5.0"
+  }
+}
diff --git a/src/index.ts b/packages/maska/src/index.ts
similarity index 77%
rename from src/index.ts
rename to packages/maska/src/index.ts
index ae18844..26cfecb 100644
--- a/src/index.ts
+++ b/packages/maska/src/index.ts
@@ -1,7 +1,6 @@
 import { Mask, MaskType, MaskOptions } from './mask'
 import { MaskInput, MaskInputOptions, MaskaDetail } from './input'
-import { vMaska } from './vue'
 import { tokens, MaskTokens } from './tokens'
 
-export { Mask, MaskInput, tokens, vMaska }
+export { Mask, MaskInput, tokens }
 export type { MaskaDetail, MaskInputOptions, MaskOptions, MaskTokens, MaskType }
diff --git a/src/input.ts b/packages/maska/src/input.ts
similarity index 100%
rename from src/input.ts
rename to packages/maska/src/input.ts
diff --git a/src/mask.ts b/packages/maska/src/mask.ts
similarity index 100%
rename from src/mask.ts
rename to packages/maska/src/mask.ts
diff --git a/src/parser.ts b/packages/maska/src/parser.ts
similarity index 100%
rename from src/parser.ts
rename to packages/maska/src/parser.ts
diff --git a/src/tokens.ts b/packages/maska/src/tokens.ts
similarity index 100%
rename from src/tokens.ts
rename to packages/maska/src/tokens.ts
diff --git a/test/input.test.ts b/packages/maska/test/input.test.ts
similarity index 100%
rename from test/input.test.ts
rename to packages/maska/test/input.test.ts
diff --git a/test/mask.test.ts b/packages/maska/test/mask.test.ts
similarity index 100%
rename from test/mask.test.ts
rename to packages/maska/test/mask.test.ts
diff --git a/test/setup.ts b/packages/maska/test/setup.ts
similarity index 100%
rename from test/setup.ts
rename to packages/maska/test/setup.ts
diff --git a/packages/maska/tsconfig.json b/packages/maska/tsconfig.json
new file mode 100644
index 0000000..6bfbc08
--- /dev/null
+++ b/packages/maska/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"]
+}
diff --git a/packages/maska/vite.config.mts b/packages/maska/vite.config.mts
new file mode 100644
index 0000000..75e7f3d
--- /dev/null
+++ b/packages/maska/vite.config.mts
@@ -0,0 +1,32 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vitest/config'
+
+import banner from 'vite-plugin-banner'
+import dts from 'vite-plugin-dts'
+
+import pkg from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'Maska',
+      fileName: 'maska'
+    }
+  },
+  plugins: [
+    dts({ rollupTypes: true }),
+    banner(
+      `/*! ${pkg.name} v${pkg.version} */`
+    )
+  ],
+  test: {
+    setupFiles: 'test/setup.ts',
+    environment: 'happy-dom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json-summary']
+    }
+  }
+})
diff --git a/index.html b/packages/vue/index.html
similarity index 92%
rename from index.html
rename to packages/vue/index.html
index 821731c..d91ca0e 100644
--- a/index.html
+++ b/packages/vue/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Maska Demo</title>
+  <title>Maska Vue Demo</title>
 </head>
 <body>
   <div id="app"></div>
diff --git a/packages/vue/package.json b/packages/vue/package.json
new file mode 100644
index 0000000..0b2f696
--- /dev/null
+++ b/packages/vue/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@maskajs/vue",
+  "version": "3.0.0-beta",
+  "description": "Simple zero-dependency input mask for Vue 2/3",
+  "keywords": [
+    "mask",
+    "inputmask",
+    "vue"
+  ],
+  "author": "Alexander Shabunevich",
+  "homepage": "https://beholdr.github.io/maska/",
+  "repository": {
+    "url": "https://github.com/beholdr/maska",
+    "type": "git",
+    "directory": "packages/vue"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/maska.umd.js",
+  "module": "./dist/maska.mjs",
+  "types": "./dist/maska.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/maska.d.ts",
+      "import": "./dist/maska.mjs",
+      "require": "./dist/maska.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "lint": "ts-standard src",
+    "lint:fix": "ts-standard --fix src",
+    "version": "npm run build && npm test"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.5.0",
+    "@vue/test-utils": "^2.4.5",
+    "happy-dom": "^14.7.1",
+    "ts-standard": "^12.0.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-banner": "^0.7.1",
+    "vite-plugin-dts": "^3.8.2",
+    "vitest": "^1.5.0",
+    "vue": "^3.2.45",
+    "vue-tsc": "^2.0.13"
+  }
+}
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
new file mode 100644
index 0000000..24ae58a
--- /dev/null
+++ b/packages/vue/src/index.ts
@@ -0,0 +1,14 @@
+import {
+  Mask,
+  MaskType,
+  MaskOptions,
+  MaskInput,
+  MaskInputOptions,
+  MaskaDetail,
+  tokens,
+  MaskTokens
+} from 'maska'
+import { vMaska } from './vue'
+
+export { Mask, MaskInput, tokens, vMaska }
+export type { MaskaDetail, MaskInputOptions, MaskOptions, MaskTokens, MaskType }
diff --git a/src/vue.ts b/packages/vue/src/vue.ts
similarity index 96%
rename from src/vue.ts
rename to packages/vue/src/vue.ts
index 0b27453..599b1a5 100644
--- a/src/vue.ts
+++ b/packages/vue/src/vue.ts
@@ -1,5 +1,5 @@
 import { Directive, DirectiveBinding } from 'vue'
-import { MaskaDetail, MaskInput, MaskInputOptions } from './input'
+import { MaskaDetail, MaskInput, MaskInputOptions } from '.'
 
 type MaskaDirective = Directive<HTMLElement, MaskInputOptions | undefined>
 
diff --git a/test/components/BindCompleted.vue b/packages/vue/test/components/BindCompleted.vue
similarity index 100%
rename from test/components/BindCompleted.vue
rename to packages/vue/test/components/BindCompleted.vue
diff --git a/test/components/BindMasked.vue b/packages/vue/test/components/BindMasked.vue
similarity index 100%
rename from test/components/BindMasked.vue
rename to packages/vue/test/components/BindMasked.vue
diff --git a/test/components/BindModel.vue b/packages/vue/test/components/BindModel.vue
similarity index 100%
rename from test/components/BindModel.vue
rename to packages/vue/test/components/BindModel.vue
diff --git a/test/components/BindUnmasked.vue b/packages/vue/test/components/BindUnmasked.vue
similarity index 100%
rename from test/components/BindUnmasked.vue
rename to packages/vue/test/components/BindUnmasked.vue
diff --git a/test/components/Callbacks.vue b/packages/vue/test/components/Callbacks.vue
similarity index 100%
rename from test/components/Callbacks.vue
rename to packages/vue/test/components/Callbacks.vue
diff --git a/test/components/ChangeValue.vue b/packages/vue/test/components/ChangeValue.vue
similarity index 100%
rename from test/components/ChangeValue.vue
rename to packages/vue/test/components/ChangeValue.vue
diff --git a/test/components/Config.vue b/packages/vue/test/components/Config.vue
similarity index 100%
rename from test/components/Config.vue
rename to packages/vue/test/components/Config.vue
diff --git a/test/components/Custom.vue b/packages/vue/test/components/Custom.vue
similarity index 100%
rename from test/components/Custom.vue
rename to packages/vue/test/components/Custom.vue
diff --git a/test/components/CustomInput.vue b/packages/vue/test/components/CustomInput.vue
similarity index 100%
rename from test/components/CustomInput.vue
rename to packages/vue/test/components/CustomInput.vue
diff --git a/test/components/DataAttr.vue b/packages/vue/test/components/DataAttr.vue
similarity index 100%
rename from test/components/DataAttr.vue
rename to packages/vue/test/components/DataAttr.vue
diff --git a/test/components/Demo.vue b/packages/vue/test/components/Demo.vue
similarity index 100%
rename from test/components/Demo.vue
rename to packages/vue/test/components/Demo.vue
diff --git a/test/components/Dynamic.vue b/packages/vue/test/components/Dynamic.vue
similarity index 100%
rename from test/components/Dynamic.vue
rename to packages/vue/test/components/Dynamic.vue
diff --git a/test/components/Events.vue b/packages/vue/test/components/Events.vue
similarity index 100%
rename from test/components/Events.vue
rename to packages/vue/test/components/Events.vue
diff --git a/test/components/Hooks.vue b/packages/vue/test/components/Hooks.vue
similarity index 100%
rename from test/components/Hooks.vue
rename to packages/vue/test/components/Hooks.vue
diff --git a/test/components/Initial.vue b/packages/vue/test/components/Initial.vue
similarity index 100%
rename from test/components/Initial.vue
rename to packages/vue/test/components/Initial.vue
diff --git a/test/components/Model.vue b/packages/vue/test/components/Model.vue
similarity index 100%
rename from test/components/Model.vue
rename to packages/vue/test/components/Model.vue
diff --git a/test/components/Multiple.vue b/packages/vue/test/components/Multiple.vue
similarity index 100%
rename from test/components/Multiple.vue
rename to packages/vue/test/components/Multiple.vue
diff --git a/test/components/Options.vue b/packages/vue/test/components/Options.vue
similarity index 100%
rename from test/components/Options.vue
rename to packages/vue/test/components/Options.vue
diff --git a/test/components/Parent.vue b/packages/vue/test/components/Parent.vue
similarity index 100%
rename from test/components/Parent.vue
rename to packages/vue/test/components/Parent.vue
diff --git a/test/components/Simple.vue b/packages/vue/test/components/Simple.vue
similarity index 100%
rename from test/components/Simple.vue
rename to packages/vue/test/components/Simple.vue
diff --git a/test/components/Sink.vue b/packages/vue/test/components/Sink.vue
similarity index 96%
rename from test/components/Sink.vue
rename to packages/vue/test/components/Sink.vue
index 7470415..2163975 100644
--- a/test/components/Sink.vue
+++ b/packages/vue/test/components/Sink.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, shallowRef } from 'vue'
+import { reactive, ref } from 'vue'
 import { vMaska } from '../../src'
 
 const mask = ref('+1 (###) ###-####')
diff --git a/packages/vue/test/setup.ts b/packages/vue/test/setup.ts
new file mode 100644
index 0000000..a9d0dd3
--- /dev/null
+++ b/packages/vue/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
diff --git a/test/vue.test.ts b/packages/vue/test/vue.test.ts
similarity index 100%
rename from test/vue.test.ts
rename to packages/vue/test/vue.test.ts
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
new file mode 100644
index 0000000..5e10d92
--- /dev/null
+++ b/packages/vue/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/vite.config.mts b/packages/vue/vite.config.mts
similarity index 78%
rename from vite.config.mts
rename to packages/vue/vite.config.mts
index 983c5b2..21d034a 100644
--- a/vite.config.mts
+++ b/packages/vue/vite.config.mts
@@ -12,14 +12,15 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
-      name: 'Maska'
+      name: 'Maska',
+      fileName: 'maska'
     }
   },
   plugins: [
     vue(),
-    dts({ rollupTypes: true }),
+    dts({ rollupTypes: true, bundledPackages: ["maska"] }),
     banner(
-      `/*! ${pkg.name} v${pkg.version} | (c) ${pkg.author} | Released under the ${pkg.license} license */`
+      `/*! ${pkg.name} v${pkg.version} */`
     )
   ],
   test: {
diff --git a/tsconfig.json b/tsconfig.json
index b497e3d..ba7c1f2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,6 @@
     "noEmit": true,
     "types": ["vite/client"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "demo/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }