Skip to content
Tiny Vue component for Electron to open links in a browser. Ideal for cross environment apps (Web & Native)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.eslintrc.js
.gitignore
LICENSE
README.md
package-lock.json
package.json
webpack.config.js
yarn.lock

README.md

Vue Flexible Link

vue2

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

Installation

npm install --save vue-flexible-link

or

yarn add vue-flexible-link

Usage

<flexible-link :native="isElectronBuild" href="https://github.com/upclab/finance-wheel">
  <span class="icon" style="color: #333;">
    <icon name="github" scale="3"></icon>
  </span>
</flexible-link>
<script>
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: {
    FlexibleLink,
  },
};
</script>
  // In the webpack config "DefinePlugin" is our friend
  plugins: [
    new webpack.DefinePlugin({
      ELECTRON_BUILD: true,
    }),
  ],

Props

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.

Note

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

Roadmap

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