Add common layout components

resources/js_vue3/app.js

@@ -8,6 +8,10 @@ import router from './router'
 import Notifications from '@kyvg/vue3-notification'
 import FontAwesomeIcon from './icons'
 
+import ResponsiveWidthWrapper from '@/layouts/ResponsiveWidthWrapper.vue'
+import FormWrapper from '@/layouts/FormWrapper.vue'
+
+
 const app = createApp(App)
 
 // Immutable app properties provided by the laravel blade view
@@ -28,7 +32,9 @@ app.use(i18nVue, {
     }
 })
 app.use(Notifications)
-
-app.component('font-awesome-icon', FontAwesomeIcon)
+app
+    .component('font-awesome-icon', FontAwesomeIcon)
+    .component('responsive-width-wrapper', ResponsiveWidthWrapper)
+    .component('form-wrapper', FormWrapper)
 
 app.mount('#app')

resources/js_vue3/layouts/FormWrapper.vue

@@ -0,0 +1,31 @@
+<template>
+    <responsive-width-wrapper>
+        <h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
+        <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
+        <slot />
+    </responsive-width-wrapper>   
+</template>
+
+<script>
+    export default {
+        name: 'FormWrapper',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            title: {
+                type: String,
+                default: ''
+            },
+
+            punchline: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js_vue3/layouts/ResponsiveWidthWrapper.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="columns is-centered">
+        <div class="form-column column is-two-thirds-tablet is-half-desktop is-half-widescreen is-one-third-fullhd">
+            <slot />
+        </div>
+    </div>    
+</template>