Enabling social share buttons in Vuetify is quite easy. All you have to do is stitch together three components provided out of the box -
- Speed dial
We will create a quick demo on Codepen. Create a new Codepen, click on
Settings, navigate to
JS and add the below libraries -
Save & Close.
JS editor, paste following code to initialise Vue.
In the “normal” app, you would want to extract the page URL with something like
Next, add HTML. Let’s begin by adding two cards - one for header and the other encapsulating the body of the page.
Use Vuetify speed-dial component to create a floating, expandable button that shows the actual sharing buttons.
The above code should get WhatsApp working - all we do is go to a specific URL when the button is clicked. No magic.
Complete the project by adding other social media so that none of your users get offended. Again, we direct user to the specific social media sites to share the page - no APIs, no apps, no nothing. This works equally beautifully in your web and mobile apps.
See this Codepen for the entire four lines of code.