Manual Configuration

Last updated 4 months ago

This information is intended for advanced users who wish to configure a Vuido application manually. In most cases the automatic quick setup should be enough.

You need to install the vuido package in order to use Vuido in you application:

npm install --save vuido

In order to use single-file components, you will also need webpack and vue-loader. The configuration is similar to a web application using Vue.js, with some important differences:

  • The vuido-template-compiler must be used instead of the standard vue-template-compiler which is used by vue-loader by default. Use the compiler option to pass the Vuido compiler to vue-loader. Note that this option requires vue-loader v15 or newer.

  • Set the target option to 'node' to ensure that the compiled script can be run correctly by Node.js.

  • Use webpack.ExternalsPlugin to exclude libui-node and other native modules from the bundle.

Example of webpack configuration using Vuido:

webpack.config.js
const path = require( 'path' );
const webpack = require( 'webpack' );
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
const VuidoTemplateCompiler = require( 'vuido-template-compiler' );
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve( __dirname, '../dist' ),
filename: 'main.js'
}
target: 'node',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compiler: VuidoTemplateCompiler
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.js', '.vue', '.json' ]
},
plugins: [
new webpack.ExternalsPlugin( 'commonjs', [ 'libui-node' ] ),
new VueLoaderPlugin()
]
};

You also need to install babel-core, babel-loader and babel-preset-env.

The basic Babel configuration which compiles the scripts for Node.js v8 looks like this:

.babelrc
{
"presets": [
[ "env", {
"targets": {
"node": 8
},
"modules": false,
"useBuiltIns": true
} ]
],
"comments": false
}