https://github.com/surveyjs/surveyjs-vue-bootstrap-material
SurveyJS Builder example with VueJS and Bootstrap-Material http://surveyjs.io/Library
https://github.com/surveyjs/surveyjs-vue-bootstrap-material
bootstrap bootstrap-material javascript survey surveyjs typescript vuejs
Last synced: about 1 year ago
JSON representation
SurveyJS Builder example with VueJS and Bootstrap-Material http://surveyjs.io/Library
- Host: GitHub
- URL: https://github.com/surveyjs/surveyjs-vue-bootstrap-material
- Owner: surveyjs
- License: mit
- Created: 2018-06-22T08:42:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-26T07:47:57.000Z (over 7 years ago)
- Last Synced: 2024-04-13T21:57:42.617Z (about 2 years ago)
- Topics: bootstrap, bootstrap-material, javascript, survey, surveyjs, typescript, vuejs
- Language: Vue
- Homepage:
- Size: 137 KB
- Stars: 2
- Watchers: 5
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueJS + SurveyJS/SurveyJS_Editor + Bootstrap Material QuickStart Source
[![Build Status][travis-badge]][travis-badge-url]
## How to run this sample application
- git clone https://github.com/surveyjs/surveyjs-vue-bootstrap-material.git
- cd surveyjs-vue-bootstrap-material
- npm i
- npm run dev
- open http://localhost:8080/ in your web browser
For detailed explanation on how VueJS things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
## Add survey component on your page
### index.html
```HTML
surveyjs-vue-bootstrap-material
We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.
window.$.material.init();
```
### VueJS component
```JavaScript
//In your VueJS App.vue or yourComponent.vue file add these lines to import
import SurveyEditor from './components/SurveyEditor'
import * as SurveyVue from 'survey-vue'
import 'bootstrap/dist/css/bootstrap.css';
var Survey = SurveyVue.Survey
Survey.cssType = "bootstrap";
//If you want to add custom widgets package
//Add these imports
import * as widgets from "surveyjs-widgets";
import "inputmask/dist/inputmask/phone-codes/phone.js";
//And initialize widgets you are want ti use
widgets.icheck(SurveyVue);
widgets.select2(SurveyVue);
widgets.inputmask(SurveyVue);
widgets.jquerybarrating(SurveyVue);
widgets.jqueryuidatepicker(SurveyVue);
widgets.nouislider(SurveyVue);
widgets.select2tagbox(SurveyVue);
widgets.signaturepad(SurveyVue);
widgets.sortablejs(SurveyVue);
widgets.ckeditor(SurveyVue);
widgets.autocomplete(SurveyVue);
widgets.bootstrapslider(SurveyVue);
export default {
name: 'app',
components: {
Survey,
SurveyEditor
},
data () {
//Define Survey JSON
//Here is the simplest Survey with one text question
var json = {
elements: [
{ type: "text", name: "customerName", title: "What is your name?", isRequired: true}
]
};
//Create the model and pass it into VueSJ Survey component
var model = new SurveyVue.Model(json)
//You may set model properties
// model.mode="display"
return {
survey: model
}
}
}
```