Skip to content
Tiny Vue component for Electron to open links in a browser. Ideal for cross environment apps (Web & Native)
JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Vue Flexible Link


Tiny Vue Component to open links in a browser, ideal for cross environment apps(Web and Native Desktop with Electron)

  • If you are in a electron app opens the link in a new browser tab with the shell.openExternal API.
  • If you are in a web, the component will be a regular web link

This component was tested with webpack only


npm install --save vue-flexible-link


yarn add vue-flexible-link


<flexible-link :native="isElectronBuild" href="">
  <span class="icon" style="color: #333;">
    <icon name="github" scale="3"></icon>
import FlexibleLink from 'vue-flexible-link/src/FlexibleLink.vue';

export default {
  data() {
    return {
        In this example ELECTRON_BUILD is a global variable
        defined at build time
      isElectronBuild: !!ELECTRON_BUILD,
  components: {
  // In the webpack config "DefinePlugin" is our friend
  plugins: [
    new webpack.DefinePlugin({
      ELECTRON_BUILD: true,


Prop Type Description Default Value
native Boolean Wheter the build for native(electron) environment true
custom-class String Use your custom class on the component -
href String Attach your href on the component '/'
target String Attach the target like 'blank' '_self'

Possible Scenarios

1. Cross Environment(Web and Electron)

Make sure your build targets are configured to electron-renderer and electron-main

You need the import the non-compiled component

import FlexibleLink from 'vue-flexible-link/src/FlexibleLink'

And you need the add the node's fs mock to your webpack configuration to get this working:

entry: {
// ...
output: {
// ...
module: {
// ...
node: {
  fs: 'empty', // fs works only with the 'empty' value 

2. For Electron Environment Only

Make sure your build targets are configured to electron-renderer and electron-main

You can import the component like this

import FlexibleLink from 'vue-flexible-link'

And you should be fine

3. For Web Environment Only

Yeah, this component doesn't make sense if you are building a web app only. Don't use it for this case.


If you are having trouble configuring the builds you may want to check out the config of my cross env project finance-wheel based on official webpack template


  • Add functionality to check the environment automatically
You can’t perform that action at this time.