Skip to content

Commit 2d9ab45

Browse files
adambereczadamberecz
committed
feat: vueform laravel
1 parent 6585088 commit 2d9ab45

File tree

35 files changed

+557
-5
lines changed

35 files changed

+557
-5
lines changed

‎src/files/vueform/laravel/bootstrap/js/resources/js/app.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import './bootstrap'
2+
3+
import { createApp } from 'vue'
4+
import App from './components/App.vue'
5+
import Vueform from '@vueform/vueform'
6+
import vueformConfig from './../../vueform.config'
7+
8+
const app = createApp(App)
9+
app.use(Vueform, vueformConfig)
10+
app.mount('#app')

‎src/files/vueform/laravel/bootstrap/js/resources/js/components/App.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>
3+
<Vueform>
4+
<TextElement name="hello_world" label="Hello" placeholder="World" />
5+
</Vueform>
6+
</div>
7+
</template>

‎src/files/vueform/laravel/bootstrap/js/resources/scss/app.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import 'bootstrap/scss/bootstrap';
2+
@import '@vueform/vueform/themes/bootstrap/scss/index.scss';
3+
4+
@media (prefers-color-scheme: dark) {
5+
body {
6+
background-color: #121212;
7+
color: white;
8+
}
9+
10+
:root, :before, :after, * {
11+
@include vf-dark-vars;
12+
}
13+
}
14+
15+
:root {
16+
font-family: Arial, Helvetica, sans-serif;
17+
font-synthesis: none;
18+
text-rendering: optimizeLegibility;
19+
-webkit-font-smoothing: antialiased;
20+
-moz-osx-font-smoothing: grayscale;
21+
}
22+
23+
body {
24+
margin: 0;
25+
display: flex;
26+
place-items: center;
27+
min-width: 320px;
28+
min-height: 100vh;
29+
}
30+
31+
#app {
32+
max-width: 1280px;
33+
margin: 0 auto;
34+
padding: 2rem;
35+
text-align: center;
36+
}

‎src/files/vueform/laravel/bootstrap/js/resources/views/welcome.blade.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Laravel</title>
7+
@vite(['resources/css/app.css','resources/scss/app.scss', 'resources/js/app.js'])
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
</html>

‎src/files/vueform/laravel/bootstrap/js/vite.config.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { defineConfig } from 'vite';
2+
import laravel from 'laravel-vite-plugin';
3+
import vue from '@vitejs/plugin-vue';
4+
5+
export default defineConfig({
6+
plugins: [
7+
laravel({
8+
input: [
9+
'resources/css/app.css',
10+
'resources/scss/app.scss',
11+
'resources/js/app.js',
12+
],
13+
refresh: true,
14+
}),
15+
vue({
16+
template: {
17+
transformAssetUrls: {
18+
// The Vue plugin will re-write asset URLs, when referenced
19+
// in Single File Components, to point to the Laravel web
20+
// server. Setting this to `null` allows the Laravel plugin
21+
// to instead re-write asset URLs to point to the Vite
22+
// server instead.
23+
base: null,
24+
25+
// The Vue plugin will parse absolute URLs and treat them
26+
// as absolute paths to files on disk. Setting this to
27+
// `false` will leave absolute URLs un-touched so they can
28+
// reference assets in the public directory as expected.
29+
includeAbsolute: false,
30+
},
31+
},
32+
}),
33+
],
34+
});

‎src/files/vueform/laravel/bootstrap/js/vueform.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import en from '@vueform/vueform/locales/en'
2+
import vueform from '@vueform/vueform/dist/bootstrap'
3+
import { defineConfig } from '@vueform/vueform'
4+
5+
export default defineConfig({
6+
theme: vueform,
7+
locales: { en },
8+
locale: 'en',
9+
axios: window.axios,
10+
})

‎src/files/vueform/laravel/material/js/resources/js/app.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import './bootstrap'
2+
3+
import { createApp } from 'vue'
4+
import App from './components/App.vue'
5+
import Vueform from '@vueform/vueform'
6+
import vueformConfig from './../../vueform.config'
7+
8+
const app = createApp(App)
9+
app.use(Vueform, vueformConfig)
10+
app.mount('#app')

‎src/files/vueform/laravel/material/js/resources/js/components/App.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div>
3+
<Vueform>
4+
<TextElement name="hello_world" label="Hello" placeholder="World" />
5+
</Vueform>
6+
</div>
7+
</template>

‎src/files/vueform/laravel/material/js/resources/scss/app.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@import '@vueform/vueform/themes/material/scss/index.scss';
2+
3+
@media (prefers-color-scheme: dark) {
4+
:root {
5+
background-color: #121212;
6+
color: white;
7+
}
8+
9+
:root, :before, :after, * {
10+
@include vf-dark-vars;
11+
}
12+
}
13+
14+
:root {
15+
font-family: Arial, Helvetica, sans-serif;
16+
font-synthesis: none;
17+
text-rendering: optimizeLegibility;
18+
-webkit-font-smoothing: antialiased;
19+
-moz-osx-font-smoothing: grayscale;
20+
}
21+
22+
body {
23+
margin: 0;
24+
display: flex;
25+
place-items: center;
26+
min-width: 320px;
27+
min-height: 100vh;
28+
}
29+
30+
#app {
31+
max-width: 1280px;
32+
margin: 0 auto;
33+
padding: 2rem;
34+
text-align: center;
35+
}

‎src/files/vueform/laravel/material/js/resources/views/welcome.blade.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Laravel</title>
7+
@vite(['resources/css/app.css','resources/scss/app.scss', 'resources/js/app.js'])
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)