Pass parameters from Visualforce to LWC

A requirement I have is for LWC to read URL parameters embedded in Visualforce pages. This can be done using standard Salesforce libraries like NavigationMixin or CurrentPageReference with multiple lines of code

I cannot use NavigationMixin because my LWC is embedded in visualforce page which is not a truly lightning. The only other option available to me is to call some default libraries under connectedcallback() in my LWC.

I was reluctant to use any standard libraries because I felt that it was too much for getting a simple parameter from the URL.

It puzzled me why we need to write so much code in LWC when we can just get it using ApexPages.currentPage().getParameters() but I eventually figured it out it won't work with LWC embedded Visualforce pages.

A workaround I used was using the global variable '$CurrentPage' on my Visualforce page, and it worked very well.

The following is an example of how to read query strings from a Visualforce page

var param = '{!$CurrentPage.parameters.qString}';
// replace id with your parameter name e.g. returnURL, accId et.,

The following code demonstrates only how to pass parameters to LWC, assuming you already know how to embed LWC in a Visualforce page.

....
$Lightning.use("c:auraApp", function() {
    $Lightning.createComponent("c:auraComponent", {
            paramValue: '{!$CurrentPage.parameters.qString}'
        },
        "auraApp",
        function(cmp) {
            console.log('LWC Componenet added in VF page');
        });
});
....

In above snippet you will be interested in only line #4 i.e.,

 paramValue: '{!$CurrentPage.parameters.qString}'

NOTE: above paramValue should be exactly same as @api decorator label

Since we know the id and also our LWC is ready to send the parameter, our LWC can accept the incoming value as shown, using the @api decorator.

@api paramValue; // Vf page must use same name to send params in line #4

Your paramValue is now available to any method of the LWC. And you can read it as follows.

someMethod(){    
	....
	console.log('This is value I got from Visualforce page ', this.paramValue);
    ....
}

I hope you find this helpful, please let me know your thoughts in the comments section.