meteor-vue / Vue Meteor

Sponsors

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

Quick Packages Links

Here is a list of recommended packages for developping a meteor+vue app:

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

Resources

Examples

• Guide Example
• TodoMVC
• Complete Example/Demo 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 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

Server-side rendering

Very easy way to render your frontend on the server automatically when a user first loads the app.

📦 See Installation & Usage in the akryum:vue-ssr package

Integrate Blaze

Render Blaze templates in Vue components and the other way around!

📦 See Installation & Usage in the vuejs:blaze-integration package

Vue 1.x

See old branch.

Features & Roadmap

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

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

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 the demo project and type in the demo project directory:

ln -s ../vue-meteor/packages packages
meteor npm install
meteor

LICENCE ISC - Created by Guillaume CHAU (@Akryum)