feat: vueform templates for builder

Author: adamberecz

templates/builder/astro/tailwind/js/builder.config.js

@@ -1,5 +1,5 @@
 import { defineConfig } from '@vueform/builder'
 
-import '@vueform/builder/index.css'
+import '@vueform/builder/tailwind.css'
 
 export default defineConfig({})

templates/builder/astro/tailwind/ts/builder.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from '@vueform/builder'
 
-import '@vueform/builder/index.css'
+import '@vueform/builder/tailwind.css'
 
 export default defineConfig({})

templates/builder/astro/vueform/js/astro.config.mjs

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

templates/builder/astro/vueform/js/builder.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vueform/builder'
+
+import '@vueform/builder/vueform.css'
+
+export default defineConfig({})

templates/builder/astro/vueform/js/src/components/FormBuilder.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="height: 100vh;">
+    <VueformBuilder />
+  </div>
+</template>

templates/builder/astro/vueform/js/src/pages/_app.ts

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

templates/builder/astro/vueform/js/src/pages/index.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../layouts/Layout.astro';
+import FormBuilder from '../components/FormBuilder.vue';
+---
+<script is:inline type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCToIMP1Rk6ZbGcfnJ2iwsnb09_lnxLmY&libraries=places"></script>
+
+<Layout title="Welcome to Astro.">
+  <FormBuilder client:only="vue"/>
+</Layout>

templates/builder/astro/vueform/js/vueform.config.js

@@ -0,0 +1,16 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/vueform'
+import { defineConfig } from '@vueform/vueform'
+import builder from '@vueform/builder/plugin'
+
+import '@vueform/vueform/dist/vueform.css'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+  apiKey: 'YOUR_PUBLIC_KEY',
+  plugins: [
+    builder,
+  ],
+})

templates/builder/astro/vueform/ts/astro.config.mjs

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

templates/builder/astro/vueform/ts/builder.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vueform/builder'
+
+import '@vueform/builder/vueform.css'
+
+export default defineConfig({})

templates/builder/astro/vueform/ts/src/components/FormBuilder.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="height: 100vh;">
+    <VueformBuilder />
+  </div>
+</template>

templates/builder/astro/vueform/ts/src/pages/_app.ts

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

templates/builder/astro/vueform/ts/src/pages/index.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../layouts/Layout.astro';
+import FormBuilder from '../components/FormBuilder.vue';
+---
+<script is:inline type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCToIMP1Rk6ZbGcfnJ2iwsnb09_lnxLmY&libraries=places"></script>
+
+<Layout title="Welcome to Astro.">
+  <FormBuilder client:only="vue"/>
+</Layout>

templates/builder/astro/vueform/ts/vueform.config.ts

@@ -0,0 +1,16 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/vueform'
+import { defineConfig } from '@vueform/vueform'
+import builder from '@vueform/builder/plugin'
+
+import '@vueform/vueform/dist/vueform.css'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+  apiKey: 'YOUR_PUBLIC_KEY',
+  plugins: [
+    builder,
+  ],
+})

templates/builder/laravel/tailwind/js/builder.config.js

@@ -1,5 +1,5 @@
 import { defineConfig } from '@vueform/builder'
 
-import '@vueform/builder/index.css';
+import '@vueform/builder/tailwind.css';
 
 export default defineConfig({})

templates/builder/laravel/tailwind/js/vueform.config.js

@@ -1,10 +1,10 @@
 import en from '@vueform/vueform/locales/en'
-import vueform from '@vueform/vueform/dist/tailwind'
+import theme from '@vueform/vueform/dist/tailwind'
 import { defineConfig } from '@vueform/vueform'
 import builder from '@vueform/builder/plugin'
 
 export default defineConfig({
-  theme: vueform,
+  theme,
   locales: { en },
   locale: 'en',
   axios: window.axios,

templates/builder/laravel/vueform/js/builder.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vueform/builder'
+
+import '@vueform/builder/vueform.css';
+
+export default defineConfig({})

templates/builder/laravel/vueform/js/resources/css/app.css

@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}

templates/builder/laravel/vueform/js/resources/js/app.js

@@ -0,0 +1,13 @@
+import './bootstrap'
+
+import { createApp } from 'vue'
+import App from './components/App.vue'
+import Vueform from '@vueform/vueform'
+import vueformConfig from './../../vueform.config'
+import Builder from '@vueform/builder'
+import builderConfig from './../../builder.config'
+
+const app = createApp(App)
+app.use(Vueform, vueformConfig)
+app.use(Builder, builderConfig)
+app.mount('#app')

templates/builder/laravel/vueform/js/resources/js/components/App.vue

@@ -0,0 +1,5 @@
+<template>
+    <div style="height: 100vh;">
+        <VueformBuilder />
+    </div>
+</template>

templates/builder/laravel/vueform/js/resources/views/welcome.blade.php

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Laravel</title>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCToIMP1Rk6ZbGcfnJ2iwsnb09_lnxLmY&libraries=places"></script>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html> 

templates/builder/laravel/vueform/js/vite.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/css/app.css',
+                'resources/js/app.js',
+            ],
+            refresh: true,
+        }),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    // The Vue plugin will re-write asset URLs, when referenced
+                    // in Single File Components, to point to the Laravel web
+                    // server. Setting this to `null` allows the Laravel plugin
+                    // to instead re-write asset URLs to point to the Vite
+                    // server instead.
+                    base: null,
+ 
+                    // The Vue plugin will parse absolute URLs and treat them
+                    // as absolute paths to files on disk. Setting this to
+                    // `false` will leave absolute URLs un-touched so they can
+                    // reference assets in the public directory as expected.
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
+});

templates/builder/laravel/vueform/js/vueform.config.js

@@ -0,0 +1,17 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/vueform'
+import { defineConfig } from '@vueform/vueform'
+import builder from '@vueform/builder/plugin'
+
+import '@vueform/vueform/dist/vueform.css'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+  axios: window.axios,
+  apiKey: 'YOUR_PUBLIC_KEY',
+  plugins: [
+    builder,
+  ],
+})

templates/builder/nuxt/tailwind/ts/builder.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from '@vueform/builder'
 
-import '@vueform/builder/index.css'
+import '@vueform/builder/tailwind.css'
 
 export default defineConfig({})

templates/builder/nuxt/vueform/ts/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div style="height: 100vh;">
+    <ClientOnly>
+      <VueformBuilder />
+    </ClientOnly>
+  </div>
+</template>

templates/builder/nuxt/vueform/ts/assets/css/main.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

templates/builder/nuxt/vueform/ts/builder.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vueform/builder'
+
+import '@vueform/builder/vueform.css'
+
+export default defineConfig({})

templates/builder/nuxt/vueform/ts/nuxt.config.ts

@@ -0,0 +1,18 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  app: {
+    head: {
+      script: [
+        {
+          async: true,
+          src: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBCToIMP1Rk6ZbGcfnJ2iwsnb09_lnxLmY&libraries=places',
+        },
+      ],
+    },
+  },
+  devtools: { enabled: true },
+  css: ['~/assets/css/main.css'],
+  modules: [
+    '@vueform/builder-nuxt',
+  ],
+})

templates/builder/nuxt/vueform/ts/vueform.config.ts

@@ -0,0 +1,16 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/vueform'
+import { defineConfig } from '@vueform/vueform'
+import builder from '@vueform/builder/plugin'
+
+import '@vueform/vueform/dist/vueform.css'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+  apiKey: 'YOUR_PUBLIC_KEY',
+  plugins: [
+    builder,
+  ],
+})

templates/builder/vite/tailwind/js/builder.config.js

@@ -1,5 +1,5 @@
 import { defineConfig } from '@vueform/builder'
 
-import '@vueform/builder/index.css'
+import '@vueform/builder/tailwind.css'
 
 export default defineConfig({})

templates/builder/vite/tailwind/ts/builder.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from '@vueform/builder'
 
-import '@vueform/builder/index.css'
+import '@vueform/builder/tailwind.css'
 
 export default defineConfig({})

templates/builder/vite/vueform/js/builder.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vueform/builder'
+
+import '@vueform/builder/vueform.css'
+
+export default defineConfig({})

templates/builder/vite/vueform/js/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCToIMP1Rk6ZbGcfnJ2iwsnb09_lnxLmY&libraries=places"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

templates/builder/vite/vueform/js/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="height: 100vh">
+    <VueformBuilder />
+  </div>
+</template>

templates/builder/vite/vueform/js/src/main.js

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import Vueform from '@vueform/vueform'
+import vueformConfig from './../vueform.config'
+import Builder from '@vueform/builder'
+import builderConfig from './../builder.config'
+
+const app = createApp(App)
+app.use(Vueform, vueformConfig)
+app.use(Builder, builderConfig)
+app.mount('#app')

templates/builder/vite/vueform/js/src/style.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');