Vue-runner NPM

VueRunner is a simple library for quickly prototyping single *.vue files without requiring global addons.

Use VueRunner to launch any *.vue file from any NodeJS script with one line of code:

new require('vue-runner')('./Example.vue');

VueRunner makes it easy to incorporate Vue UI pages into backend scripts and CLI programs.

VueRunner includes support for typescript, pug, scss, and svg. With one additional method you can attach a backend ExpressJS server for quickly prototyping of API commands.

Installing

npm install vue-runner
# --- or ---
yard add vue-runner

Creating a Simple Frontend

Initialize VueRunner from any js/ts file and reference your *.vue component as the first argument.

example.ts:

import VueRunner from 'vue-runner';

new VueRunner('./Example.vue');
  .isReady.then(() => console.log('READY!!'));

Example.vue:

<template>
  <h1>Hello!!</h1>
</template>

VueRunner supports all the capabilities of a normal vue template, which means it can load full-blown vue components that import and reference other components.

Complex.vue:

<template>
  <h1>Hello!!</h1>
  <my-counter/>
</template>

<script lang="ts">
  import MyCounter from './MyCounter.vue';

  @Component({ components { MyCounter } })
  export default class App extends Vue {}
</script>

Adding a Simple Backend API

If your vue file needs a backend API, VueRunner's attachAPI method makes this easy:

example.ts:

import VueRunner from 'vue-runner';

new VueRunner('./API.vue');
  .attachAPI((apiServer) => {
    apiServer.get('/name', (req, res) => {
      res.send('Caleb');
    });
  });

The apiServer object is a standard ExpressJS instance.

Your routes run on the same port as the frontend UI but under the /api path. This removes the need for complex CORS configuration.

Use our simple API helper library to access with from frontend Vue components.

API.vue

<template>
  <div>
    <h1 v-if='name'>Confirming your identity...</h1>
    <h1>Hello, {{name}}!</h1>
  </div>
</template>

<script lang="ts">
  import API from 'vue-runner/API';
  
  class Hello {
    async mounted() {
      this.name = await API.get('/name');
    }
  }
</script>