Question T5583
Visible to All Users

How to integrate custom widget in VueJS application

created 4 years ago (modified 4 years ago)

[Ticket cloned from T5573: Render a childcomponent into JSON object in survey?]

Hello,
It is possible of course. Please follow our documentation.

Thank you,
Andrew
SurveyJS Team

Sign in to comment on this post

Answers approved by surveyjs Support

created 4 years ago

Hello,

We have a sample repo illustrating how to integrate SurveyJS + VueJS
Here it is - https://github.com/surveyjs/surveyjs_vue_quickstart
You can find custom widget usage example in this repo - https://github.com/surveyjs/surveyjs_vue_quickstart/tree/master/src/components

Thanks, Serge
SurveyJS Team

    Comments (2)
    P P
    peteruithoven 3 years ago

      I know this question isn't mine but that example isn't really Vue. It's an imperative approach, that happens to happen inside a Vue component. Ideally we can use the declarative approach, like I see in Survey JS's Vue components:
      https://github.com/surveyjs/survey-library/blob/master/src/vue/dropdown.vue

      I noticed that the React example on the examples page is more declarative, following the common React approach:
      https://surveyjs.io/Examples/Library?id=custom-widget-react-select&platform=Reactjs&theme=modern#content-js

      I did notice the following 2 components in the survey vue library, is there a way to use those?

      P P
      peteruithoven 3 years ago

        I am actually making a bit of progress trough trail and error:
        https://stackblitz.com/edit/vite-vue2-wjkj4-oip3qx?file=src%2Fcomponents%2FTextWithButton.vue

        It looks like it picks up a Vue component when:

        • The custom regular Vue component is registered with the name of the custom widget. (using Vue.component())
        • You set isDefaultRender of the custom widget to true.

        This Vue component will then get props like question and css from which you can retrieve things defined in the definition / json / model.

        By mutating the question.value you can set the value of the question.

        Sign in to comment on this post

        Other Answers

        created 3 years ago

        It looks like it picks up a Vue component when:

        • The custom regular Vue component is registered with the name of the custom widget. (using Vue.component())
        • You set isDefaultRender of the custom widget to true.

        This Vue component will then get props like question and css from which you can retrieve things defined in the definition / json / model.
        By mutating the question.value you can set the value of the question.

        Example:
        https://stackblitz.com/edit/vite-vue2-wjkj4-yf3bed?file=src%2Fcomponents%2FTextWithButton.vue
        (For posterity I'd be happy if this example was included in the SurveyJS's org on Github)

          Comments (2)
          A A
          Alex 3 years ago

            Hello,

            You are right about isDefaultRender and component and custom widget names.
            I am impressed with your job and the example that you created, thank you!
            Now we work on documentation for our products - there is a lot of things to do, and I transferred your example to our technical writers to find a place for it on our site.

            Is it all OK now? Do you still have more questions on this topic?

            Thank you,
            Alex
            SurveyJS Team

            P P
            peteruithoven 3 years ago

              I'm all good :)

              Sign in to comment on this post