Home

Vue-Salesforce Setup...

To setup your vue project to be working inside salesforce (as an iframe) start with plain vanila vue (or download this starter) and follow the steps below.

Build for Salesforce's Deployment

Download the repo and prepare the build for salesforce

create vue.config.js file

Add the section below with publicPath: '/'

module.exports = {
  publicPath: './'
};

Build the project

npm run build

go to DIST folder and create an archive (zip) file from the contents -> archive these files

Prepare the Salesforce.

Create a new static resource

Go to salesforce, setup, type "static resources " in quick find. Create a new static resource with options as shown below and upload the contents of the archived build from the previous step. and click "save".

Create a new lightning web component using SF Developer Console where the vue app will reside

Open Salesforce Developer Console and create a new Lightning component as shown on the picture

Fill out the options as shown for the new component

Configure the vueApp.cmp file

Copy paste the below line as shown on the picture below to specify the static resource folder that was created before ("vue") and the entry point (the "/index.html").

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

Let's use the component

Let's say we decided to put the component on the "Home" page..

Goto "Edit page" as shown on the picture below

Find the newly created component on the left under "Custom" and drag it onto a section of the screen

You should be able to preview the component after that as shown below

Save the changes and exit the edit mode

Click "Activate" to activate the changes and select the default visibility options when prompted as shown below. Then click "save"

That's it! You should be able to see the Vue starter page inside Salesforce