Git Product home page Git Product logo

meteor-vue-example's Introduction

Simple meteor app with vue

A simple meteor project featuring vue as ui layer (more info).

Steps to reproduce

In the console, create the project and add the relevant packages:

meteor create meteor-vue-example
cd ./meteor-vue-example
meteor remove blaze-html-templates
meteor add static-html akryum:vue akryum:vue-component session
meteor

All the required npm dependencies will be automatically added to your project's package.json and installed with meteor npm install.

Replace the client/main.html file with:

<head>
  <title>meteor-vue-example</title>
</head>

<body>
  <app></app>
</body>

Replace the client/main.js file with:

// Libs
import {Meteor} from 'meteor/meteor';
import {Vue} from 'meteor/akryum:vue';

// Main app
import App from '/imports/ui/App.vue';

Meteor.startup(() => {
  new Vue({
    el: 'body',
    replace: false,
    components: {
      App
    }
  });
});

Create Vue components in .vue files. Component files outside of the imports directory will automatically registered with Vue.component (more info). Or you can import your single-file components with an import statement (more info). When you save them, your components will be instantly hot-reloaded in your browser.

You can add more languages in your single-file components, see here.

Inside your Vue components, you can use Meteor tracker, Apollo or a vuex store.

You can add a routing system and localization.

meteor-vue-example's People

Contributors

akryum avatar runarberg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

meteor-vue-example's Issues

It does not work with Vue 2.0

Upgrading to Vue 2.0 does not work:

meteor npm install --save vue@^2.0.3

Error:

[Vue warn]: Failed to mount component: template or render function not defined.

Installing vue in Meteor

Following up on previous issue,

I got some install problems, described here: vue forum

In main.js, I have:

import {Meteor} from 'meteor/meteor';
import {Vue} from 'meteor/akryum:vue';
  1. I suppose, Vue is installed through akryum:vue.

  2. Do you know if it makes a difference at what dir I am when I install Vue?
    What should I do so, when I declare these 2 lines in any project, Vue will install?

Thanks,
Marc

Update to Vue 2.0?

Is there an update for Vue 2.0? What is need to update it with Vue 2.0?

If one wants to rebuild this project manually, is there a liste of steps?

Thanks,
Marc

Error when rendering anonymus component

Hello @Akryum, this is very exciting. Having Vue as a front end for Meteor sounds like a great combo.

I have been trying to run the examples for Vue 2.x but I unfortunately can not. I even cloned the repos, meteor npm installed the dependencies, but to no avail.

This is the recurring issue I am having:

image

I'm not super familiar with Vue.js yet so, I can't really tackle the issue. Would you mind sharing any input you have on this?

Error adding akryum:vue

When running 'meteor add akryum:vue', there's an error:

=> Errors while adding packages:

While checking for akryum:[email protected]:
error: No compatible binary build found for this package. Contact the package author and ask them to
publish it for your platform.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.