Using Vue Components

Forms
1

Hello!

I have created some Vue components outside of Plumsail Designer which I would like to use in a custom HTML control and then ajax the output to a SharePoint field and save the form or use POST elsewhere.

So far creating a Vue.Component('test-component', ...blah..) works but is not ideal for larger complex apps with multiple single file components all in the one editor.

Would the JavaScript editor be able to @import .vue files say if they where uploaded to a Sharepoint Document library? Or is there a simple way Iā€™m missing to reference the components (without having to re-write them as Global components)

1 Like
2

Hi!

Thank you for the interesting question! I'm very proud of our users.

OK, let's say you're developing custom Vue-components. Create an entry point (ex.: main.js) like this:

import HelloWorld from './components/HelloWorld.vue'
export { HelloWorld };

Next, build your project as a UMD module with the command:

yarn build --target lib --name components src/main.js

Upload the built file to a SharePoint library, say Site Assets:
image

Then, open the Designer and insert the following code into JS-editor:

fd.beforeCreate(function(options) {
	return _spComponentLoader
		.loadScript('{path to site}/SiteAssets/components.umd.js')
		.then(function(m) {
			options.components['hello-world'] = m.HelloWorld;
			console.log(m);
		});
});

The code above imports your library and defines extra components. Now, you can use your component within an HTML-control:

image

2 Likes
3

This is great thank you so much!

4

Hi Jusper,
thank you so much for your very helpful instructions :hugs:

We use PlumsailFroms in SharePoint Online with custom view components where we followed your instructions to create and load the custom vue components.

Everything works fine for SharePoint internal users, but loading components.umd.js for external users with _spComponentLoader(...).loadSrcript(...) returns undefined.

Every thing else works fine for external and internal users?

Do you have any advice for us?

Thank you very much.
KR
Manni

5

Hello @Manni,

Welcome to Plumsail Community!

Not sure what is wrong here. Please share the screenshot of all errors in the browser console for the external user.

Another option, is that external users don't have permission to the script file. Please ask an external user to download the script by its direct URL