I am writing a lightning web component that is going to be used in Salesforce Classic, Lightning Experience and an Employee Community. It does not HAVE to be a lightning web component - I could use a traditional Aura Lightning Component if I must.

However, what I am finding is that the visualforce page does not work, even when the lwc component is embedded in a aura component that is then used with Lightning Components for Visualforce. I can see from the documentation here that using a lwc directly from within visualforce is not supported, but I was under the impression that it may work if wrapped in an aura component.

My question then is this:

Has anyone had success having a lwc wrapped in an aura component display successfully within Visualforce? Or is this completely unsupported behaviour?


With Summer 19 release, now its possible to use LWC in visualforce as lightning out.

https://www.paul-force.com/2019/04/24/use-lightning-web-components-in-visualforce-pages/ https://releasenotes.docs.salesforce.com/en-us/summer19/release-notes/rn_lwc_vf.htm

| improve this answer | |
  • 1
    But is it possible to use Visualforce components within LWC? – wintermute Sep 6 '19 at 17:27

It is not supported behavior. While some standard components are actually LWC, they are given an exception (otherwise Lightning Out would be useless). For now, custom LWC are not supported in an unsupported environment, no matter how you dress it up.

| improve this answer | |
  • Thanks for the quick reply sfdcfox. I suppose there is no mention anywhere of whether they intend to support this in the future? This sounds like I will need to go back to using an Aura component for the front end for this component. – bpilling Mar 5 '19 at 2:49
  • @bpilling I personally hope that they will, but I do not know if or when such support would be coming. You might try asking on Twitter if anyone knows and is willing to share. – sfdcfox Mar 5 '19 at 3:13
  • I decided to just rewrite the component in Aura - and that has worked fine. Most of the heavy lifting was in the apex controller anyway, so in my case it's unfortunate, but not a big deal I have had to go back to an Aura component. – bpilling Mar 5 '19 at 23:37

When I wrapped up the LWC into the Aura Component

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName">
    <div>This is AURA component</div>

and Use Aura App with Lightning Out

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:auraComponent"/>
    <aura:dependency resource="markup://force:showToast" type="EVENT"/>
    <aura:dependency resource="markup://force:navigateToURL" type="EVENT"/>

I was able to enable it on the visualforce page in classic

$Lightning.use("c:auraApp", function() {
      recordId: ...,
      sObjectName: ...
| improve this answer | |
  • Looks like I will need to revisit this and see if I am doing something wrong. If it is working for you chances are I've done something wrong - so thank you for posting your code. – bpilling Mar 6 '19 at 21:27
  • Just found this comment for the tile lwc in the LWC Component Library: Usage Considerations Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences. Which suggests that Lightning Components for Visualforce is supported? – bpilling Apr 4 '19 at 18:32

This is a fairly exceptional workaround, and I've only just tested this, but Marko seems to be correct in that we can wrap LWC in Aura components, which are in turn wrapped in an Aura app. The VF page must have lightning enabled, but you can get around this limitation it seems. This will make passing events fairly interesting.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.