Using ForceJS with Vue.js

Using ForceJS with Vue.js

Brett M. Nelson - Tuesday, March 14, 2017

Lets take a momment to use some of what we learned about Vue.js and use it to make something with data from Salesforce.com.

Two things we will be using that we haven't talked about before are:

Setup

To get things started lets set up our basic Vue app. We will also need to download ForceJS, you can get the JavaScript here or do as I did and downloaded the repo as a zip and put the whole thing in my project directory.

We are using the ES5 usage scenario for now.

Up to you.

However you decide to do it, add a reference to force.all.js, I added it after the vue reference.

Now let's create a file for our apps custom JavaScript. For this I created a folder named app and a file named app.js in that folder. Feel free to spice things up and do them your own way.

I also added a reference to my app/app.js file after the so my scripts look like this so far:

All the JavaScripts

I'm tired of looking at plain html so I added Bootstrap as well but you don't have to.

Install ForceServer

For this we are going to use ForceServer installed globally. I'm going to be using Yarn, learn more here, but I will try to remember to also show the npm commands.

yarn

npm install -g force-server

npm

npm install -g force-server

Now we should be able to run force-serve from the command line and see... well nothing since we didn't put markup that would render output.

Let's fix that!

Create Base App

In index.html lets add some content to the body above our scripts.

index.html Starter body Content

In app/app.js lets create our basic Vue app:

var app = new Vue({ el: '#main', data: { message: 'WIPDeveloper.com Contact List!' } })

Run force-server

Now lets see if we left anything broken. In the console run:

Start ForceServer

force-server

It should open a browser and show you things are working.

Working So Far

Working So Far

Conclusion

We are just getting started but so far we have proven that include ForceJS and Vue.js on the same page and serve it with ForceServer and things haven't blown up yet! Isn't that exciting? Let me know by leaving a comment below or emailing brett@wipdeveloper.com.

Tags