Skip to content

Commit 54c3174

Browse files
spinnspinn
authored
Merge pull request #198 from ditdot-dev/feature/vue3-support
Support for Vue 3
2 parents bc47144 + a8824fa commit 54c3174

File tree

18 files changed

+22212
-3507
lines changed

18 files changed

+22212
-3507
lines changed

‎README.md‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ Create conversational conditional-logic forms with Vue.js.
1212
<img src="https://www.ditdot.hr/demo/vff/visuals/v-form-green-full-rotate-02.png" alt="v-form screenshots">
1313
</p>
1414

15+
Starting with v2.0.0, Vue Flow Form has migrated from Vue 2 to **Vue 3**. If you're looking for README for Vue Flow Form v1.1.7, which works with Vue 2, <a href="https://github.com/ditdot-dev/vue-flow-form/blob/bc471447a6aadbbda7df9eb950566ed03a0d5e37/README.md">check it out here</a>.
16+
1517
## Live Demos
1618

1719
* [Questionnaire example](https://www.ditdot.hr/demo/vff/questionnaire/)
@@ -98,7 +100,7 @@ And then in your App.vue file:
98100

99101
<script>
100102
// Import necessary components and classes
101-
import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
103+
import { FlowForm, QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
102104
103105
export default {
104106
name: 'example',
@@ -146,14 +148,14 @@ HTML:
146148
<!DOCTYPE html>
147149
<html>
148150
<head>
149-
<!-- Requires Vue version 2.6.x -->
150-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
151+
<!-- Requires Vue version 3.x -->
152+
<script src="https://unpkg.com/vue@next"></script>
151153
<!-- Flow Form -->
152-
<script src="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.7"></script>
154+
<script src="https://unpkg.com/@ditdot-dev/vue-flow-form@2.0.0"></script>
153155
<!-- Flow Form base CSS -->
154-
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.7/dist/vue-flow-form.min.css">
156+
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.0.0/dist/vue-flow-form.min.css">
155157
<!-- Optional theme.css -->
156-
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@1.1.7/dist/vue-flow-form.theme-minimal.min.css">
158+
<link rel="stylesheet" href="https://unpkg.com/@ditdot-dev/vue-flow-form@2.0.0/dist/vue-flow-form.theme-minimal.min.css">
157159
<!-- Optional font -->
158160
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;900&amp;display=swap">
159161
</head>
@@ -167,29 +169,31 @@ HTML:
167169
JavaScript (content of app.js):
168170

169171
```js
170-
var app = new Vue({
172+
var app = Vue.createApp({
171173
el: '#app',
172174
template: '<flow-form v-bind:questions="questions" v-bind:language="language" />',
173175
data: function() {
174176
return {
175-
language: new FlowForm.LanguageModel({
177+
language: new VueFlowForm.LanguageModel({
176178
// Your language definitions here (optional).
177179
// You can leave out this prop if you want to use the default definitions.
178180
}),
179181
questions: [
180-
new FlowForm.QuestionModel({
182+
new VueFlowForm.QuestionModel({
181183
title: 'Question',
182-
type: FlowForm.QuestionType.MultipleChoice,
184+
type: VueFlowForm.QuestionType.MultipleChoice,
183185
options: [
184-
new FlowForm.ChoiceOption({
186+
new VueFlowForm.ChoiceOption({
185187
label: 'Answer'
186188
})
187189
]
188190
})
189191
]
190192
}
191193
}
192-
});
194+
}).component('FlowForm', VueFlowForm.FlowForm);
195+
196+
const vm = app.mount('#app');
193197
```
194198

195199
## Changelog

‎babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
presets: [
3-
['@vue/app', {
3+
["@vue/cli-plugin-babel/preset", {
44
useBuiltIns: "entry"
55
}]
66
]

‎build/rollup.config.js‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,20 @@ import postcssImport from 'postcss-import'
99
import { terser } from 'rollup-plugin-terser'
1010
import del from 'rollup-plugin-delete'
1111
import copy from 'rollup-plugin-copy'
12-
13-
import _postcss from 'postcss'
14-
15-
const postcssTrim = _postcss.plugin('postcss-trim', () => css => {
16-
css.raws.after = css.raws.after.replace(/^\n*$/g, '')
17-
})
12+
import replace from '@rollup/plugin-replace'
1813

1914
const globals = {
20-
'vue': 'Vue'
15+
vue: 'Vue'
2116
}
2217

23-
const componentName = 'FlowForm'
18+
const external = ['vue']
19+
20+
const componentName = 'VueFlowForm'
2421

2522
export default [
2623
{
2724
input: 'src/main.js',
25+
external,
2826
output: {
2927
name: componentName,
3028
exports: 'named',
@@ -40,12 +38,15 @@ export default [
4038
css: false,
4139
compileTemplate: true
4240
}),
41+
replace({
42+
preventAssignment: true,
43+
'process.env.NODE_ENV': JSON.stringify('production')
44+
}),
4345
postcss({
4446
output: 'css',
4547
extract: 'vue-flow-form.css',
4648
plugins: [
47-
postcssImport(),
48-
postcssTrim()
49+
postcssImport()
4950
]
5051
}),
5152
css(),
@@ -65,6 +66,7 @@ export default [
6566
},
6667
{
6768
input: 'src/main.js',
69+
external,
6870
output: {
6971
name: componentName,
7072
exports: 'named',
@@ -77,12 +79,15 @@ export default [
7779
css: false,
7880
compileTemplate: true
7981
}),
82+
replace({
83+
preventAssignment: true,
84+
'process.env.NODE_ENV': JSON.stringify('production')
85+
}),
8086
postcss({
8187
output: 'css',
8288
extract: 'vue-flow-form.css',
8389
plugins: [
84-
postcssImport(),
85-
postcssTrim()
90+
postcssImport()
8691
]
8792
}),
8893
css(),
@@ -102,6 +107,7 @@ export default [
102107
},
103108
{
104109
input: 'src/main.js',
110+
external,
105111
output: {
106112
name: componentName,
107113
exports: 'named',
@@ -114,12 +120,15 @@ export default [
114120
css: false,
115121
compileTemplate: true
116122
}),
123+
replace({
124+
preventAssignment: true,
125+
'process.env.NODE_ENV': JSON.stringify('production')
126+
}),
117127
postcss({
118128
output: 'css',
119129
extract: 'vue-flow-form.css',
120130
plugins: [
121-
postcssImport(),
122-
postcssTrim()
131+
postcssImport()
123132
]
124133
}),
125134
css(),
@@ -139,6 +148,7 @@ export default [
139148
},
140149
{
141150
input: 'src/main.js',
151+
external,
142152
output: {
143153
name: componentName,
144154
exports: 'named',
@@ -151,12 +161,15 @@ export default [
151161
css: false,
152162
compileTemplate: true
153163
}),
164+
replace({
165+
preventAssignment: true,
166+
'process.env.NODE_ENV': JSON.stringify('production')
167+
}),
154168
postcss({
155169
output: 'css',
156170
extract: 'vue-flow-form.min.css',
157171
plugins: [
158-
postcssImport(),
159-
postcssTrim()
172+
postcssImport()
160173
],
161174
sourceMap: true,
162175
minimize: true

‎examples/questionnaire/Example.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,11 @@
7777
7878
export default {
7979
name: 'example',
80+
8081
components: {
8182
FlowForm
8283
},
84+
8385
data() {
8486
return {
8587
submitted: false,
@@ -103,7 +105,7 @@
103105
required: true,
104106
placeholder: 'Start typing here...'
105107
}),
106-
new QuestionModel({
108+
new QuestionModel({
107109
id: 'multiple_choice_image',
108110
tagline: "Let's take it one step further...",
109111
title: 'Tell us what is your favorite social network hangout.',
@@ -220,7 +222,7 @@
220222
path_b: 'path_b'
221223
}
222224
}),
223-
new QuestionModel({
225+
new QuestionModel({
224226
id: 'path_a',
225227
title: 'Excellent choice! 🥳',
226228
content: 'Press enter or use the continue button for the final submit screen.',
@@ -253,12 +255,15 @@
253255
]
254256
}
255257
},
258+
256259
mounted() {
257260
document.addEventListener('keyup', this.onKeyListener)
258261
},
259-
beforeDestroy() {
262+
263+
beforeUnmount() {
260264
document.removeEventListener('keyup', this.onKeyListener)
261265
},
266+
262267
methods: {
263268
onKeyListener($event) {
264269
// We've overriden the default "complete" slot so
@@ -324,7 +329,7 @@
324329
325330
return data
326331
}
327-
},
332+
}
328333
}
329334
</script>
330335

‎examples/questionnaire/main.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
https://www.ditdot.hr/en
55
*/
66

7-
import Vue from 'vue'
7+
import { createApp } from 'vue'
88
import Example from './Example.vue'
99

10-
new Vue({
11-
render: h => h(Example)
12-
}).$mount('#app')
10+
createApp(Example).mount('#app')

‎examples/quiz/main.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
https://www.ditdot.hr/en
55
*/
66

7-
import Vue from 'vue'
7+
import { createApp } from 'vue'
88
import Example from './Example.vue'
99

10-
new Vue({
11-
render: h => h(Example)
12-
}).$mount('#app')
10+
createApp(Example).mount('#app')

‎examples/support-page/main.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
https://www.ditdot.hr/en
55
*/
66

7-
import Vue from 'vue'
7+
import { createApp } from 'vue'
88
import Example from './Example.vue'
99

10-
new Vue({
11-
render: h => h(Example)
12-
}).$mount('#app')
10+
createApp(Example).mount('#app')

0 commit comments

Comments
 (0)