Salesforce Lightning application with Vue.js and Webpack — PART 1

Since Salesforce has released the Lightning Component Framework, the need to use third party frameworks decreased drastically. Indeed, by using a “stateful client and stateless server architecture that relies on JavaScript on the client side to manage UI component metadata and application data”, they provided a faster and modern way to build beautiful user interfaces.

However, building an entire application on Lightning may still be painful for several reasons :

• Navigation. Let’s say you have dozen of screens in your application with multiple paths between them. One of the solutions I prefer is to have a top “Navigator” component that would handle application events and display or hide components dynamically. It works. But it is hardly sustainable with an application that keeps growing with more and more nested components over time.
• Locker Service. Using javascript libraries that are not Locker Service compliant.
• Developer skills. You just need some background in web application development.

For these three reasons, I have decided to try using Vue.js as an alternative to lightning applications and share my experience. Here are the topics :

PART 1

1. Initiating the Vue.js application with Webpack
2. Loading the application in a lightning component

PART 2

1. Building the application locally
2. Calling server side actions (with APEX controller)

1. Initiating the Vue.js application with Webpack

We are going to create a Vue.js application using this Progressive Web App template. For that, you will need to have vue-cli installed :

$ npm install -g vue-cli

Then, you can initiate your application. When asking to install vue-router, say yes as we will use that later.

$ vue init pwa vuejs-with-salesforce
? Project name vuejs-with-salesforce
? Project short name: fewer than 12 characters to not be truncated on homescreen
s (default: same as name)
? Project description A Vue.js integration with Salesforce Lightning components
? Author Lucas Ennouchi
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Then, go the folder (same as your project name), install and run it :

$ cd vuejs-with-salesforce
$ npm install
$ npm run dev

You should now have a browser tab opened at localhost:8080 with your new application displayed.

In the next part, we are going to build the application for production, upload it in Salesforce as a static resource and load it from a Lightning Component.

2. Loading the application in Salesforce

Before building the application, we have to make sure that production paths are using the ‘./’ notation for specifying the current directory. In order to do that, we’ll modify the file ‘/config/index.js’. At line 13, set assetsPublicPath to ‘./’ instead of ‘/’ :

module.exports = {
 build: {
  ...
  assetsPublicPath: './',
  ...
 },
 dev: {
  ...
 }
}

Then we need to build the application for production :

$ npm run build

This should have created a “dist” folder in your project repository. You can now compress it and upload it as a static resource in Salesforce. We’ll call our static resource ‘vueApplication’

Then, we are going to create a simple Lightning Application where we are going to load our Vue JS Application thanks to the lightning:container component.

<aura:application >
    <lightning:container src="{!$Resource.vueApplication + '/index.html'}"/>
</aura:application>

You should now see your Vue.js application loading in Salesforce.

In the next part, we’ll elaborate a more complicated application using Vuex as the store management and vue-router for handling navigation between different screens. Then we’ll see how to call actions of the Lightning component controller.