feat: vueform astro tailwinds

Author: adamberecz

src/files/vueform/astro/tailwind-material/js/astro.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    vue({ appEntrypoint: '/src/pages/_app' }),
+    tailwind(),
+  ],
+})

src/files/vueform/astro/tailwind-material/js/src/components/TestForm.vue

@@ -0,0 +1,5 @@
+<template>
+  <Vueform>
+    <TextElement name="hello_world" label="Hello" placeholder="World" />
+  </Vueform>
+</template>

src/files/vueform/astro/tailwind-material/js/src/pages/_app.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Vueform from '@vueform/vueform'
+
+export default async (app: App) => {
+  const vueformConfig = (await import('../../vueform.config')).default
+  app.use(Vueform, vueformConfig)
+}

src/files/vueform/astro/tailwind-material/js/src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro';
+import TestForm from './../components/TestForm.vue';
+---
+
+<Layout title="Welcome to Astro.">
+  <div class="dark max-w-[320px] h-screen flex items-center justify-center mx-auto">
+    <TestForm client:only="vue" class="dark:text-white" />
+  </div>
+</Layout>

src/files/vueform/astro/tailwind-material/js/tailwind.config.js

@@ -0,0 +1,18 @@
+import vueformPlugin from '@vueform/vueform/tailwind'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    './vueform.config.js',
+    './node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
+    './node_modules/@vueform/vueform/themes/tailwind/**/*.js',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    vueformPlugin,
+  ],
+};

src/files/vueform/astro/tailwind-material/js/vueform.config.js

@@ -0,0 +1,11 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/tailwind-material'
+import { defineConfig } from '@vueform/vueform'
+
+import '@vueform/vueform/dist/tailwind-material.css'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+})

src/files/vueform/astro/tailwind-material/ts/astro.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    vue({ appEntrypoint: '/src/pages/_app' }),
+    tailwind(),
+  ],
+})

src/files/vueform/astro/tailwind-material/ts/src/components/TestForm.vue

@@ -0,0 +1,5 @@
+<template>
+  <Vueform>
+    <TextElement name="hello_world" label="Hello" placeholder="World" />
+  </Vueform>
+</template>

src/files/vueform/astro/tailwind-material/ts/src/pages/_app.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import Vueform from '@vueform/vueform'
+
+export default async (app: App) => {
+  const vueformConfig = (await import('../../vueform.config')).default
+  app.use(Vueform, vueformConfig)
+}

src/files/vueform/astro/tailwind-material/ts/src/pages/index.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro';
+import TestForm from './../components/TestForm.vue';
+---
+
+<Layout title="Welcome to Astro.">
+  <div class="dark max-w-[320px] h-screen flex items-center justify-center mx-auto">
+    <TestForm client:only="vue" class="dark:text-white" />
+  </div>
+</Layout>