Skip to content

Commit a54aebf

Browse files
randallknutsonrandallknutson
committed
Reinitialize from vue-cli and upgrade to formio 4.x
1 parent 9498e6b commit a54aebf

File tree

11 files changed

+408
-17
lines changed

11 files changed

+408
-17
lines changed

‎package-lock.json‎

Lines changed: 317 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
{
2-
"name": "vue-app-starterkit-test",
2+
"name": "vue-app-starterkit",
33
"version": "0.1.0",
4-
"private": true,
4+
"private": false,
55
"scripts": {
66
"serve": "vue-cli-service serve",
77
"build": "vue-cli-service build",
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"bootstrap-sass": "^3.4.1",
12+
"bootswatch": "^3.4.1",
1113
"core-js": "^2.6.5",
1214
"vue": "^2.6.10",
1315
"vue-class-component": "^7.0.2",
16+
"vue-formio": "^4.0.0",
1417
"vue-property-decorator": "^8.1.0",
1518
"vue-router": "^3.0.3",
1619
"vuex": "^3.0.1"

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title>vue-app-starterkit-test</title>
9+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/formio.full.min.css">
910
</head>
1011
<body>
1112
<noscript>

‎src/App.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<div id="app">
33
<div id="nav">
44
<router-link to="/">Home</router-link> |
5-
<router-link to="/about">About</router-link>
5+
<router-link to="/about">About</router-link> |
6+
<router-link to="/form">Form</router-link> |
7+
<router-link to="/builder">Form Builder</router-link>
68
</div>
79
<router-view/>
810
</div>

‎src/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Vue from 'vue';
22
import App from './App.vue';
33
import router from './router';
44
import store from './store';
5+
import './styles.scss';
56

67
Vue.config.productionTip = false;
78

‎src/router.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Vue from 'vue';
22
import Router from 'vue-router';
33
import Home from './views/Home.vue';
4+
import Form from './views/Form.vue';
5+
import Builder from './views/Builder.vue';
46

57
Vue.use(Router);
68

@@ -21,5 +23,15 @@ export default new Router({
2123
// which is lazy-loaded when the route is visited.
2224
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
2325
},
26+
{
27+
path: '/form',
28+
name: 'form',
29+
component: Form,
30+
},
31+
{
32+
path: '/builder',
33+
name: 'builder',
34+
component: Builder,
35+
},
2436
],
2537
});

‎src/shims-vue.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ declare module '*.vue' {
22
import Vue from 'vue';
33
export default Vue;
44
}
5+
6+
declare module 'formiojs/Formio';

‎src/styles.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
$icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
2+
@import "../node_modules/bootswatch/yeti/_variables.scss";
3+
@import "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
4+
@import "../node_modules/bootswatch/yeti/_bootswatch.scss";
5+
6+
.footer {
7+
margin-top: 10px;
8+
width: 100%;
9+
height: 60px;
10+
line-height: 60px;
11+
background-color: #f5f5f5;
12+
text-align: center;
13+
}
14+
15+
.hero-image {
16+
display: inline;
17+
height: 2em;
18+
}
19+
20+
.text-blue {
21+
color: #127ABF;
22+
}
23+
24+
.text-green {
25+
color: #449414;
26+
}

‎src/views/Builder.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="home">
3+
<img alt="Vue logo" src="../assets/logo.png">
4+
<FormBuilder v-bind:form="form" />
5+
</div>
6+
</template>
7+
8+
<script lang="ts">
9+
import { Component, Vue } from 'vue-property-decorator';
10+
import { FormBuilder } from 'vue-formio';
11+
12+
@Component({
13+
components: {
14+
FormBuilder,
15+
},
16+
data: () => {
17+
return {
18+
form: {},
19+
};
20+
},
21+
})
22+
export default class Home extends Vue {}
23+
</script>

‎src/views/Form.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="home">
3+
<Form src="https://examples.form.io/example" />
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
import { Component, Vue } from 'vue-property-decorator';
9+
import { Form } from 'vue-formio';
10+
11+
@Component({
12+
components: {
13+
Form,
14+
},
15+
})
16+
export default class Home extends Vue {}
17+
</script>

0 commit comments

Comments
 (0)