Vue as a Meteor UI layer

This project is in beta.

Tested with Meteor 1.4.2-rc.0

This project contains new meteor packages to help build meteor apps with first-class vuejs integration as the ui layer.

Examples

• Simple example project
• Simple example project (Vue 2.x)
• Blaze example project [2]
• Routing example project
• Routing example project (vue 2.x)
• i18n example project
• Vuex example project

Features

Currently supported and possible future features (in no particular order) are:

• Declarative subscriptions and meteor reactive data (Vue 1.x, Vue 2.x)
• Single-file components (.vue) with basic support of <template>, <script> and <style> (with optional scoped attribute) (Vue 1.x, Vue 2.x)
• Instant Hot-reloading of components (Vue 1.x, Vue 2.x)
• lang attribute on <style> in .vue files (Vue 1.x, Vue 2.x)
• Less official integration in .vue files (Vue 1.x, Vue 2.x)
• Sass official integration in .vue files (Vue 1.x, Vue 2.x)
• Stylus official integration in .vue files (Vue 1.x, Vue 2.x)
• lang attribute on <template> in .vue files (Vue 1.x, Vue 2.x)
• Jade official integration in .vue file (Vue 1.x, Vue 2.x)
• lang attribute on <script> in .vue files (Vue 1.x, Vue 2.x)
• Coffeescript official integration in .vue files (Vue 1.x, Vue 2.x)
• Apollo client integration (Vue 1.x, Vue 2.x)
• Easy routing with vue-router out-of-the-box integration & fast-render (Vue 1.x, Vue 2.x)
• Easy localization with vue-i18n out-of-the-box integration, auto-detection, server-side injection and key-in-hand ui (Vue 1.x)
• Easy state management with vuex integration (Vue 1.x)
• Use Blaze templates in your vue app (Vue 1.x, Vue 2.x)
• Typescript official integration in .vue files
• Server-side rendering (Vue 2.x)

Track the project progress here.

Usage

New project without blaze

See the simple example project.

New project with blaze

See the blaze example project.

Development project

Clone this repository and type in the project directory:

meteor npm install
meteor

Meteor & Tracker data integration (Vue 1.x, 2.x)

Declarative subscriptions and meteor reactive data

See Usage in akryum:vue package

Single-file component (Vue 1.x, 2.x)

It allows you to write your components in this format with hot-reloading support.

See Usage in arkyum:vue-component package

Routing

Vue 1.x

Routing for Vue 1.x and Meteor using vue-router.

See Installation & Usage in arkyum:vue-router package

Example app

Vue 2.x

Routing for Vue 2.x and Meteor using vue-router.

See Installation & Usage in arkyum:vue-router2 package

Example app

Apollo integration (Vue 1.x, 2.x)

Use apollo in your vue component!

See Installation & Usage in the vue-apollo npm package

Localization (Vue 1.x)

Translate your app quickly and easily with vue-i18n.

See Installation & Usage in akryum:vue-i18n package

Premade selection ui in akryum:vue-i18n-ui package

Example app

State management with vuex (Vue 1.x)

Manage the state of your app with a centralized data store with vuex.

See Installation & Usage in akryum:vuex

Example app

Embed Blaze template (Vue 1.x, 2.x)

Use Blaze templates inside your vue components.

See Installation & Usage in akryum:vue-blaze-template

Example app

Get involved

This project is very much a work-in-progress, so your help will be greatly appreciated!
Feel free to contribute by opening a PR or an issue (but check before if the topic already exists).

---

LICENCE ISC - Created by Guillaume CHAU (@Akryum)