Description

Vue instances without any script, just like alpine.js but using the actual Vue library, with all of its abilities and none of the limitations of alpine.js.

• Supports nearly all alpine.js directives: x-data, x-init, x-show, x-bind, x-on, x-model, x-text, x-html, x-if, x-for, x-cloak
• Doesn't support x-spread or x-transition yet (but you can use freely Vue's <transition> wrapper component)
• Additionally supports computed properties via x-computed:propname="expression"
• Additionally supports re-usable components via x-component and x-props
• Use any other Vue option via x-opts
• New experimental feature: introduce variables via x-let

Quick Start

<div x-data="{ who: 'world' }">
  <div>Hello {{who}} from vue-alpine!</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bandleader/[email protected]/dist/for-script-tag.min.js"></script>

Or you can import the ES module. It default-exports a function which you need to call to initialize the instances on your page. The script-tag version of the library does this automatically, just like alpine.js.

More complex example

<div x-data="{ who: 'world' }">
  <div><input x-model="who"></div>
  <div x-if="who">Hello, {{who}}!</div>
  <input type="button" @click="who=''" value="Clear">
</div>

Special directives (beyond those in alpine.js)

x-computed

<div 
  x-data="{ who: 'world' }"
  x-computed:greeting="'Hello, ' + who + '!'"
  >
  {{greeting}}
</div>

You can have multiple x-computeds on a single element.

You can also pass a function:

<div 
  x-data="{ who: 'world' }"
  x-computed:greeting="() => {
    return 'Hello, ' + who + '!'
  }"
  >
  {{greeting}}
</div>

x-component and x-props

Re-usable Vue components:

<template x-component="fancy-button" x-props="['bgcolor']">
  <button type="button" style="{background: bgcolor}"><slot /></button>
</template>

<div x-data>
  <fancy-button bgcolor="lightgreen">Green fancy button</fancy-button>
  <fancy-button :bgcolor="'yellow'">Yellow fancy button</fancy-button>
</div>

x-props is optional, and you can also Vue's object syntax for defaults and type validation.

x-opts

Use any other Vue options you like:

<div x-data="{name: ''}" x-opts="{
  watch: {
    name(newValue, oldValue) { 
      console.log('Name was changed from', oldValue, 'to', newValue) 
    }
  }
}">
</div>

x-let

Experimental feature that lets you introduce a new variable into scope, so you don't have to type the whole computation (nor recompute it) every time you need it.

<div x-for="custId in customerIds">
  <template x-let:customer="getCustomer(custId)">
    <div>{{customer.firstName}} {{customer.lastName}}</div>
  </template>
</div>

You can have multiple x-lets on a single element.