surveyjs / surveyjs_vue_quickstart

SurveyJS + Vue 2 Quickstart Template

SurveyJS + Vue 2 Quickstart Template

SurveyJS is a set of JavaScript components that allow you and your users to build surveys / forms, store them in your database, and visualize survey results for data analysis. This quick start template uses Vue 2 and the following SurveyJS components:

• SurveyJS Form Library
• Survey Creator / Form Builder
• SurveyJS PDF Generator
• SurveyJS Dashboard

NOTE: If you are looking for a similar quickstart template for a Vue 3 application, refer to the following project: SurveyJS + Vue 3 Quickstart Template.

Run the application

git clone https://github.com/surveyjs/surveyjs_vue_quickstart.git
cd surveyjs_vue_quickstart
npm i
npm run serve

Open http://localhost:8080/ in your web browser.

Template structure

This template covers most basic use cases. You can find code examples for them in the following files:

• Create a standalone survey
  • src/data/survey_json.js
  • src/views/Survey.vue
• Add Survey Creator to a page
  • src/components/SurveyCreator.vue
  • src/views/Creator.vue
• Export a survey to a PDF document
  • src/views/ExportToPDF.vue
• Visualize survey results
  • As charts
    • src/data/analytics_data.js
    • src/views/Analytics.vue
  • As a table (modern browsers)
    • src/data/analytics_data.js
    • src/views/AnalyticsTabulator.vue
  • As a table (old browsers)
    • src/data/analytics_data.js
    • src/views/AnalyticsDatatables.vue
• Create a custom question type
  • src/components/customwidget.js
• Register third-party components
  • src/components/SurveyCreator.vue

surveyjs_vue_quickstart's Issues

Create a new rating module and edit for the first time the Rate Valus items is empty

how to I populate json data from API?

I have an API tha provides json data to survejs with VUE

In the documentation the json is static, but I want to populate the survey through the obtained API JSON

insufficient npm audit: 7 high & 2 critical vulnerabilities

See the npm audit from master branch (e2149a0) below:

                       === npm audit security report ===

# Run  npm install --save-dev [email protected]  to resolve 6 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nightwatch [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ nightwatch > mocha-nightwatch > debug                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Critical      │ Command Injection                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ growl                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nightwatch [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ nightwatch > mocha-nightwatch > growl                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/146                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ http-proxy-agent                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nightwatch [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ nightwatch > proxy-agent > http-proxy-agent                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/607                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ http-proxy-agent                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nightwatch [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ nightwatch > proxy-agent > pac-proxy-agent >                 │
│               │ http-proxy-agent                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/607                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ https-proxy-agent                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nightwatch [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ nightwatch > proxy-agent > https-proxy-agent                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/593                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ https-proxy-agent                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ nightwatch [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ nightwatch > proxy-agent > pac-proxy-agent >                 │
│               │ https-proxy-agent                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/593                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


# Run  npm install --save-dev [email protected]  to resolve 12 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ lodash                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > lodash                                               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/577                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > debug                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > engine.io > debug                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-adapter > debug                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-client > debug                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-client > engine.io-client >    │
│               │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-adapter > socket.io-parser >   │
│               │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-client > socket.io-parser >    │
│               │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-parser > debug                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ ws                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > engine.io > ws                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/550                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ ws                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-client > engine.io-client > ws │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/550                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ parsejson                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ karma [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ karma > socket.io > socket.io-client > engine.io-client >    │
│               │ parsejson                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/528                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


# Run  npm install --save-dev [email protected]  to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ mocha [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ mocha > debug                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Critical      │ Command Injection                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ growl                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ mocha [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ mocha > growl                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/146                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


# Run  npm install --save-dev [email protected]  to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ mime                                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ url-loader [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ url-loader > mime                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/535                       │
└───────────────┴──────────────────────────────────────────────────────────────┘


found 21 vulnerabilities (11 low, 1 moderate, 7 high, 2 critical) in 10702 scanned packages
  21 vulnerabilities require semver-major dependency updates.

Readme instructions typo

Readme says to npm run dev and the script in the package.json is serve

Date Picker not working.

I have tried this surveyjs_vue_quickstart but date picker is not working.

widgets.jqueryuidatepicker(SurveyKo);

Getting error "Cannot read property 'fn' of undefined"

if (!$.fn.bootstrapDP && !!$.fn.datepicker && !!$.fn.datepicker.noConflict) {

line no 703 Survey-widget.js

Uncaught Error: Component survey is already registered

I followed the steps given in the repository readme and only installed the dependencies without changing any code. Getting the following issue in console with a white blank screen on port 8080.

SurveyVue.Model doesn't update "completedHTML"

Hi, I have an issue when I try to change the model of a survey using a click event (on a button).
The component's data:

  data() {
    var json1 = {
   "completedHtml": "completedHTML json1",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json1"
      }
     ]
    }
   ]
  };
      var json2 = {
   "completedHtml": "completedHTML json2",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json2"
      }
     ]
    }
   ]
  };   
    var model = new SurveyVue.Model(json1);
    return {
      survey: model,
      json1,
      json2
    };
  }

And I also have a button that change the survey model

<button v-on:click="changeSurveyJson22">Change survey json22</button>

  methods: {
    changeSurveyJson22() {
      this.survey = new SurveyVue.Model(this.json2);
    }

The bug occurs when I complete the survey and then click to "Change survey json22" button, the question changes but the completedHTML continues with the previous value "completedHTML json1" that should be "completedHTML json2".

Is it ok to use this.survey = new SurveyVue.Model(this.json2) to change the model of a survey?

Full source code:

Summary

<template>
  <div class="container">
    <!-- If you want to hide survey, comment the lines below -->
    <div>
      <button @click="changeSurveyJson11">Change survey json11</button>
      <button @click="changeSurveyJson22">Change survey json22</button>
    </div>
    <h2>SurveyJS Library - a sample survey below</h2>
    <survey :survey="survey"></survey>
  </div>
</template>

<script>
import * as SurveyVue from "survey-vue";
import "bootstrap/dist/css/bootstrap.css";
var Survey = SurveyVue.Survey;
Survey.cssType = "bootstrap";

import * as widgets from "surveyjs-widgets";
import "inputmask/dist/inputmask/phone-codes/phone.js";

import { init as customWidget } from "../components/customwidget";

widgets.icheck(SurveyVue);
widgets.select2(SurveyVue);
widgets.inputmask(SurveyVue);
widgets.jquerybarrating(SurveyVue);
widgets.jqueryuidatepicker(SurveyVue);
widgets.nouislider(SurveyVue);
widgets.select2tagbox(SurveyVue);
widgets.sortablejs(SurveyVue);
widgets.ckeditor(SurveyVue);
widgets.autocomplete(SurveyVue);
widgets.bootstrapslider(SurveyVue);
customWidget(SurveyVue);

SurveyVue.Serializer.addProperty("question", "tag:number");

export default {
  components: {
    Survey
  },
  data() {
    var json1 = {
   "completedHtml": "completedHTML json1",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json1"
      }
     ]
    }
   ]
  };
      var json2 = {
   "completedHtml": "completedHTML json2",
   "pages": [
    {
     "name": "page1",
     "elements": [
      {
       "type": "text",
       "name": "question1 json2"
      }
     ]
    }
   ]
  };   
    var model = new SurveyVue.Model(json1);
    return {
      survey: model,
      json1,
      json2
    };
  },
  methods: {
    changeSurveyJson11() {
      this.survey = new SurveyVue.Model(this.json1);
    },
    changeSurveyJson22() {
      this.survey = new SurveyVue.Model(this.json2);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

使用pdf导出时，如果使用的文件来自对象服务器OOS中，会产生跨域问题

在使用pdf功能导出文件时，如果文件里面有来自其他服务器中的图片地址的引用，那么生成的pdf文件无法显示图片,控制台显示跨域问题，但是我发现，将标签修改为<img src='xxxx' crossorigin='anonymous' 则又可以将图片下载下来

SurveyJs throwing uncaught reference error in VueJs

Hey I have this code and I am installing surveyJs using npm.

I have come across the following issue where the SurveyVue is being considered as undefined, imo not sure what am I doing wrong since the component is being rendered perfectly over here, but anyways would be great if anyone could lend a hand

My main Js file
`
window.Vue = require('vue');
Vue.component('navigation', require('./views/navigation.vue'));
Vue.component('SurveyVue', require('survey-vue'));

var Survey = SurveyVue.Survey;
Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
Survey.surveyCss.currentType = "bootstrap";
var model = new Survey.Model(surveyJson);

var app = new Vue({
el: '#app',
data: {
survey: model
}
});

`

And rendering data in html like this:

<div id="app"> <div class="container"> <navigation></navigation> <survey :survey='survey'></survey> </div> </div>
Getting this error

Uncaught ReferenceError: SurveyVue is not defined
at Object. (app.js:10209)
at webpack_require (app.js:20)
at Object. (app.js:10165)
at webpack_require (app.js:20)
at _toString (app.js:63)
at app.js:66

Any help would eb appreciated.

License?

Could you add a license to this code? Is it MIT like the main repo? Or does it mainly reuse the code in the main repo?

Thanks!

Application UI issues

• check styling of survey
• fix SurveyJS Creator vertical size

How can I make the editor menu appear on html?

I saw the editor menu on example.
But I can see that on this quickstart.

How can I make the editor menu appear on html ?

Vendor file big and take long time to load

after build , system take long time to load and vendor file size very big 9 M
what should i do ?

Hyperlink not working in pdf

hyperlink not working in pdf and it's only shows in blue color only and without click action

Avoid adding global style

Hey, is it possibile to avoid having survey style (eg. Bootstrap) injected in my page at a global level? I'm trying to use scoped attribute but the result is the same: bootstrap style is affecting other application parts.

I could use an iframe but I would prefer to avoid that.

Dynamic schema binding

Hello,
I try to bind a dynamically generated schema to the Survey component. When I use a static variable as in the example everything works but if I use a prop to get data from a parent component and create a model and display the survey I always geht the Error:

page.setSurveyImpl is not a function
    at VueSurveyModel../src/survey.ts.SurveyModel.doOnPageAdded

Is this a known Issue? Has anybody got a solution with binding a dynamically generated scheme to this survey? Basically I have questions that can be selected and will then generate the schema for the survey.

Can I Exclude Bootstrap.css and styling remain same ??

Survey containing matrix question makes page unresponsive (stuck on loading)

Hi!
I have an issue where I am using survey-vue and have been able to load a survey so that it shows. But - if it contains a "matrix" question, the page gets stuck on loading and it becomes unresponsive.

I tried to recreate the problem on codesandbox, but there was no error there https://codesandbox.io/s/survey-vue-tests-mqx1e

So I tried to change my app to make it as similar as I could to my sandbox, but the problem persists. My app is not based on vue-cli, it loads a laravel template with vue inside.

I tried both passing in the data by setting a prop, and directly into the survey component (from the app() method), and the page crashes using both ways.
The survey-vue component also gives two warnings: $attrs is readonly" and "$listeners is readonly" (regardless if containing matrix question). The error points to the file: jsonobjects.ts , 732: private addPropertyToClass. (These warnings only show in the laravel app, not in my vue-cli test). If I inspect with vue-devtools in the test sandbox, I can see the Survey component and its children (SurveyString, SurveyPage), but in the laravel app those components don't show in the devtools - I can only see the Survey component,

But other question types for example "checkbox" and text field don't cause this page crash.
Do you have any insight regarding this problem?

Update: I made a new test laravel project with just one blade template, and simplified vue to just one component. The problem is still there. You can download/see code here https://github.com/chesterlaykin/surveyvue-failure-test.git

"survey: Unknown Component" shown in data of Vue DevTools Inspector

https://www.loom.com/share/e1479956849d45d98450db9c0451a399

See above video for context of what I mean.

Outdated dependency versions

The dependency versions in the package.json or the documentation should be updated. The third step npm -i only works if executed like this: npm -i --legacy-peer-deps. I have npm 7.0.15 installed.

CKEDITOR is not working on this boilerplate.

this code make an error about the CKEDITOR as below.
I just run this code with instruction.

knockout-latest.js?68fb:16 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

How can I fix it?

project too simple to know model usage

Please expand this project to include more often used cases in survey, like:

add model events "onValueChanged", "onCompleted" - your "survey react quickstart" has them already;
also before creation and then dynamically changing some properties, like "title", or adding conditional question in to existing survey

Currently project is too basic in my opinion.