feat: vueform astro vueform js

Author: adamberecz

src/files/vueform/astro/vueform/js/astro.config.mjs

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

src/files/vueform/astro/vueform/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/vueform/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/vueform/js/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+import TestForm from './../components/TestForm.vue';
+---
+<style is:global lang="scss">
+@import './../styles/style.scss';
+</style>
+
+<Layout title="Welcome to Astro.">
+  <TestForm client:only="vue" />
+</Layout>

src/files/vueform/astro/vueform/js/src/styles/style.scss

@@ -0,0 +1,42 @@
+@import '@vueform/vueform/themes/vueform/scss/index.scss';
+
+@media (prefers-color-scheme: dark) {
+  :root, :before, :after, * {
+    @include vf-dark-vars;
+  }
+}
+
+:root {
+  color: white;
+  
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+form {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: black;
+  }
+
+  html {
+    background: white;
+  }
+}

src/files/vueform/astro/vueform/js/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}

src/files/vueform/astro/vueform/js/vueform.config.js

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

src/test.js

@@ -141,6 +141,7 @@ async function main() {
     const isBuilder = builder === 'builder'
     const isTailwind = ['tailwind', 'tailwind-material'].indexOf(theme) !== -1
     const isBootstrap = ['bootstrap'].indexOf(theme) !== -1
+    const isAstro = framework === 'astro'
 
     /**
      * Enter project folder
@@ -173,6 +174,14 @@ async function main() {
       await runCommand('npm', ['install', 'bootstrap'])
     }
 
+    /**
+     * Install Vue in Astro
+     */
+    if (isAstro) {
+      console.log('Installing Vue...')
+      await runCommand('npm', ['install', 'vue', '@astrojs/vue'])
+    }
+
     /**
      * Install Vueform package
      */