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
or
yarn add vue-flexible-link
<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,
}),
],
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' |
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
},
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
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