DevsignStudio / vue-meteor

Vue first-class integration in Meteor

This project is currently in beta.

vue+meteor is a set of packages to help you create awesome apps quickly and efficiently with two great web technologies:

• vuejs is the frontend
• meteor is the platform (client, server, database, network)

You will be able to use meteor data inside Vue or write .vue files in your meteor project.

Complete Example/Demo Project

Recommended Packages Links

• 📦 vue-meteor-tracker (meteor tracker integration)
• 📦 akryum:vue-component (vue component files)
• 📦 akryum:vue-router2 (vue-router 2.x helpers)
• 📦 vue-apollo (apollo integration)
• 📦 akryum:vue-blaze-template (use blaze inside vue components)
• 📦 vue-supply (use reactive data & automatic subscriptions in components and vuex store)
• 📦 akryum:vue-ssr (Server-Side Rendering)

More Examples

For more detailed documentations, see the usage section below.

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

Usage

Recommended: New project with Vue 2.x and without Blaze

Create a new project without blaze, using Vue 2.x:

See the simple example project.

New project with Vue 1.x and without blaze

Create a new project without blaze, using Vue 1.x:

See the simple example project.

New project with blaze

See the blaze example project.

Meteor & Tracker data integration

Declarative subscriptions and meteor reactive data

📦 See Usage in npm vue-meteor-tracker package

Single-file component

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

📦 See Usage in arkyum:vue-component package

Routing

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

📦 See Installation & Usage in arkyum:vue-router package

Example app

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

📦 See Installation & Usage in arkyum:vue-router2 package

Example app

Apollo integration

Use apollo in your vue component!

📦 See Installation & Usage in the vue-apollo npm package

Localization

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

Embed Blaze template

Use Blaze templates inside your vue components.

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

Example app

---

Features & Roadmap

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

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

Track the project progress here.

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).

Development project

Clone this repository and type in the project directory:

meteor npm install
meteor

---

LICENCE ISC - Created by Guillaume CHAU (@Akryum)