https://github.com/ulixee/vue-runner
Easily launch and run any *.vue file as a standalone app
https://github.com/ulixee/vue-runner
Last synced: about 1 year ago
JSON representation
Easily launch and run any *.vue file as a standalone app
- Host: GitHub
- URL: https://github.com/ulixee/vue-runner
- Owner: ulixee
- License: mit
- Created: 2020-03-03T15:18:55.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T03:36:02.000Z (over 3 years ago)
- Last Synced: 2025-02-25T09:47:56.636Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vue-runner
- Size: 4.55 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
VueRunner is a simple library for quickly prototyping single *.vue files [without requiring global addons](https://cli.vuejs.org/guide/prototyping.html#instant-prototyping).
Use VueRunner to launch any *.vue file from any NodeJS script with one line of code:
```javascript
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
```bash
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*:
```typescript
import VueRunner from 'vue-runner';
new VueRunner('./Example.vue');
.isReady.then(() => console.log('READY!!'));
```
*Example.vue*:
```
Hello!!
```
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:
```
Hello!!
import MyCounter from './MyCounter.vue';
@Component({ components { MyCounter } })
export default class App extends Vue {}
```
# 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](https://expressjs.com/) 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
```
Confirming your identity...
Hello, {{name}}!
import API from 'vue-runner/API';
class Hello {
async mounted() {
this.name = await API.get('/name');
}
}
```
# Full Reference Documentation
new VueRunner(pathToVueFile: string, options?: Options) => instance
Options:
- port - string
- title - string
instance.isReady => Promise
instance.attachAPI((apiServer) => void)
instance.on((event) => void)
Events:
- listening
- ready
- error
# ToDo:
- Write unit tests
- Figure out how to expose vue/webpack configuration and plugins