MaVue: Easier Vue apps inspired by Mavo

MaVue helpers

App creation

These helpers import Vue automatically and offer easier ways to create Vue apps. See Installation below for an overview of the different ways to use MaVue.

• <v-app>: Make simple Vue apps by writing HTML
• createApp(): Create Vue apps with less JS

Current

• <ma-data>: Data storage and authentication, using Madata
• <set-data>: Name expressions and use the result in other expressions
• v-default: Provide default values for v-model
• v-focus: Focus elements when they are inserted or when data changes
• Functions: A set of helper functions convenient in developing small data-driven applications

Future work

• <v-editable> to make editable elements bound to data
• <v-list> to easily generate UI for editable lists of data, with drag & drop, controls to add, duplicate, or delete items, and keyboard navigation

Installation

Zero hassle, no control

To import all of MaVue and use it with the <v-app> custom element, all you need is this somewhere in your HTML:

<script src="https://mavue.mavo.io/mavue.js" type="module"></script>

This imports every MaVue helper and adds it to <v-app>.

Minimal hassle, some control

To easily create (Ma)Vue apps in JS, you can import createApp() and use it instead of Vue’s createApp().

It imports Vue for you, adds all the MaVue helpers, and includes some additional conveniences so you can create apps with less code.

<div id="app">
	<input type=number v-model=foo> + 1 = {{ foo + 1 }}
</div>
<script type="module">
import { createApp } from "https://mavue.mavo.io/mavue.js";

let app = createApp({
	data: {
		foo: 1
	}
});
</script>

Some hassle, more control

You can import all of MaVue on Vue apps you create in your JS, as a mixin, so you can use it with your own version of Vue

import { createApp } from "vue";
import { mixin } from "https://mavue.mavo.io/mavue.js";

let app = createApp({
	// ...
}).mount("#app");

More hassle, total control

If you only need a few helpers, you can import them individually, following the instructions on their individual pages.