Menu
I’m trying to use Vue.js on Visualforce (salesforce). Here is what I did so far.
Generate Vue.js app with vue-cli, build it
vue init webpack vue-sample
cd vue-sample
yarn
yarn build
Zip up dist folder
zip -r VueSample ./dist/*
Create Static Resource in Salesforce (Name: VueSample, File: VueSample.zip)
Create Visualforce page
EDIT: add apex:page tag in the below example. initially, it was not displayed as I didn't put right space in the markdown editor
<apex:page id="VueSample" showHeader="false" cache="false"
standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0">
<html>
<head>
<meta charset="utf-8"></meta>
<title>Vue Sample</title>
<apex:stylesheet value="{!URLFOR( $Resource.VueSample, 'dist/static/css/app.090f1fe8ffa03cdc03a19db87af18abe.css' )}"/>
</head>
<body>
<div id="app"></div>
<apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/manifest.a5a27e99ade9f48f7f62.js' )}"/>
<apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/vendor.ae75c6b5bea60f5d8cec.js' )}"/>
<apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/app.3c76c2b4382e06be5fe2.js' )}"/>
</body>
</html>
</apex:page>
if I open this Visualforce page, nothing will be displayed. I checked Chrome’s console and I can see the javascript files and the css file in the static resource are correctly downloaded in the browser, and also no errors are displayed in the developer console. what am I missing here? why can’t I see anything?
please also let me know the best way to handle the file name’s hash here. I don’t want to change file hash in visualforce page whenever I upload new resource bundle. should I just stop adding the hash?
480
asked Jun 06 '26 15:06
It seems to me, first of all you should use standard Visualforce tags structure for pages:
<apex:page>
<div id="app"></div>
<!--List all script files from static resource-->
<apex:includeScript value="{!URLFOR($Resource.VueSample, '/path/to/your/script.js')}"/>
</apex:page>
Also I'd like to suggest you include additional properties for <apex:page> tag, such as applyHtmlTag, showHeader and sidebar, sometimes it affects behavior of custom scripts on Visualforce pages:
<apex:page applyHtmlTag="false" showHeader="false" sidebar="false">
And I'd like to suggest you to read a series of articles about using Vue.js on Visualforce, specially part 2 and part 3, there are a lot of useful details.
74
the problem was the timing that the javascript code gets executed.
Using apex:includeScript tag, the javascript file is placed in the head tag eventually, and app.js is executed before div#app is ready.
for this, loadOnReady=“true" attribute can be used.
I only added loadOnReady=“true" to app.js, because adding it to vendor.js, page loading became super slow. I believe vendor.js doesn't have to wait for the ready event.
I guess just using normal script tag at the bottom of the page, which is suggested in the article Hleb posted, will also solve the problem as well.
here is what I did.
<apex:page id="VueSample" showHeader="false" cache="false"
standardStyleSheets="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0">
<html>
<head>
<meta charset="utf-8"></meta>
<title>Vue Sample</title>
<apex:stylesheet value="{!URLFOR( $Resource.VueSample, 'dist/static/css/app.css' )}"/>
</head>
<body>
<div id="app"></div>
<apex:includeScript value="{!URLFOR( $Resource.VueSample, 'dist/static/js/vendor.js' )}"/>
<apex:includeScript loadOnReady="true" value="{!URLFOR( $Resource.VueSample, 'dist/static/js/app.js' )}"/>
</body>
</html>
</apex:page>
I also modified webpack.prod.conf.js so that webpack won't add hash to the file name and that I don't have to change Visualforce page when I build new static resource.
--- build/webpack.prod.conf.js (date 1503464009000)
+++ build/webpack.prod.conf.js (date 1503628466000)
@@ -23,8 +23,7 @@
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
- filename: utils.assetsPath('js/[name].[chunkhash].js'),
- chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+ filename: utils.assetsPath('js/[name].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
@@ -39,7 +38,7 @@
}),
// extract css into its own file
new ExtractTextPlugin({
- filename: utils.assetsPath('css/[name].[contenthash].css')
+ filename: utils.assetsPath('css/[name].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
@@ -83,10 +82,10 @@
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
- new webpack.optimize.CommonsChunkPlugin({
- name: 'manifest',
- chunks: ['vendor']
- }),
Vue.js now works on Visualforce.
40
answered Jun 09 '26 06:06
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With