chore: better demo

demo/nuxt.config.js

@@ -1,13 +1,17 @@
 export default {
   head: {
+    title: 'Directivue - Demo',
+    htmlAttrs: { lang: 'en' },
     meta: [
-      { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover' }
+      { name: 'description', content: 'Demonstration of Vue directives by directivue' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     ]
   },
-  modules: [
+  buildModules: [
     '@nuxtjs/tailwindcss'
   ],
   tailwindcss: {
+    configPath: '~/tailwind.config.js',
     cssPath: '~/assets/css/tailwind.pcss'
   },
   plugins: [

demo/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "directivue-demo",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "generate": "nuxt generate",
+    "start": "nuxt start"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "latest",
+    "nuxt": "latest"
+  }
+}

demo/pages/index.vue

@@ -1,15 +1,28 @@
 <template>
-  <main class="container h-screen mx-auto flex justify-center items-center">
-    <div class="grid grid-rows-2 grid-cols-2 gap-4 border-2 border-gray-500 p-4">
-      <button
-        v-for="color in ['bg-red-600', 'bg-green-600', 'bg-blue-600', 'bg-yellow-600']"
-        :key="color"
-        v-ripple
-        class="text-lg font-semibold focus:outline-none h-32 w-32 px-8 py-2"
-        :class="color"
-      >
-        Click Me
-      </button>
+  <main class="container h-screen mx-auto flex flex-col justify-center items-center">
+    <div class="grid gap-2">
+      <div>
+        <label for="autofocus" class="block text-2xl font-semibold mb-4">
+          AutoFocus
+        </label>
+        <input id="autofocus" v-auto-focus class="focus:outline-none w-full bg-transparent border-2 border-gray-500 rounded-md mb-4 px-4 py-2" placeholder="Type some text...">
+      </div>
+      <div>
+        <div class="text-2xl font-semibold mb-4">
+          Ripple
+        </div>
+        <div class="grid grid-rows-2 grid-cols-2 gap-4 border-2 border-gray-500 p-4">
+          <button
+            v-for="color in ['bg-red-600', 'bg-green-600', 'bg-blue-600', 'bg-yellow-600']"
+            :key="color"
+            v-ripple
+            class="text-lg font-semibold focus:outline-none h-32 w-32 px-8 py-2"
+            :class="color"
+          >
+            Click Me
+          </button>
+        </div>
+      </div>
     </div>
   </main>
 </template>

demo/plugins/directives.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
-import { RippleDirective } from '../../dist'
+import { AutoFocus, Ripple } from '../../dist'
 
-Vue.directive('ripple', RippleDirective)
+Vue.directive('autoFocus', AutoFocus)
+Vue.directive('ripple', Ripple)