vue-salesforce-starter

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Prepare the build for Salesforce Deployment

create vue.config.js file as specified -> 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