├── .client
    ├── app
    │   ├── app.vue
    │   └── logo.png
    ├── main.js
    ├── package.json
    └── webpack.config.js
├── .gitignore
├── .meteor
    ├── .finished-upgraders
    ├── .gitignore
    ├── .id
    ├── packages
    ├── platforms
    ├── release
    └── versions
├── README.md
├── index.html
└── lib
    ├── collections.js
    └── methods.js


/.client/app/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="todo-app">
 3 |     <img id="logo" src="./logo.png">
 4 |     <form @submit.prevent="addTodo">
 5 |       <input v-model="newTodo">
 6 |       <button type="submit">Add Todo</button>
 7 |     </form>
 8 |     <ul>
 9 |       <li v-for="todo in todos" track-by="_id">
10 |         <span>{{todo.text}}</span>
11 |         <a @click="removeTodo(todo._id)">[x]</a>
12 |       </li>
13 |     </ul>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | module.exports = {
19 | 
20 |   data: function () {
21 |     return {
22 |       todos: [],
23 |       newTodo: ''
24 |     }
25 |   },
26 | 
27 |   methods: {
28 |     addTodo: function () {
29 |       if (this.newTodo.trim()) {
30 |         Meteor.call('addTodo', this.newTodo)
31 |         this.newTodo = ''
32 |       }
33 |     },
34 |     removeTodo: function (id) {
35 |       Meteor.call('removeTodo', id)
36 |     }
37 |   },
38 | 
39 |   created: function () {
40 |     // here we are manually managing the subscription
41 |     // and reactive updates. but it is very easy
42 |     // to extend Vue to make this cleaner.
43 |     this.subscription = Meteor.subscribe('todos')
44 |     Tracker.autorun(function () {
45 |       this.todos = Todos.find().fetch()
46 |     }.bind(this))
47 |   },
48 | 
49 |   destroyed: function () {
50 |     this.subscription.stop()
51 |   }
52 | }
53 | </script>
54 | 
55 | <style>
56 | #logo {
57 |   width: 100px;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/.client/app/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs/vue-webpack-meteor-example/1f74acd566df4be18eaf07ae2c28f0ad6818bacf/.client/app/logo.png


--------------------------------------------------------------------------------
/.client/main.js:
--------------------------------------------------------------------------------
1 | var Vue = require('vue')
2 | var App = Vue.extend(require('./app/app.vue'))
3 | 
4 | Template.body.onRendered(function () {
5 |   new App({ el: '#app' })
6 | })
7 | 


--------------------------------------------------------------------------------
/.client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "dependencies": {
 6 |     "vue": "^1.0.0"
 7 |   },
 8 |   "devDependencies": {
 9 |     "babel-core": "^6.0.0",
10 |     "babel-loader": "^6.0.0",
11 |     "babel-plugin-transform-runtime": "^6.3.13",
12 |     "babel-preset-es2015": "^6.3.13",
13 |     "babel-runtime": "^5.8.29",
14 |     "css-loader": "^0.23.0",
15 |     "file-loader": "^0.8.4",
16 |     "style-loader": "^0.13.0",
17 |     "vue-hot-reload-api": "^1.2.1",
18 |     "vue-html-loader": "^1.0.0",
19 |     "vue-loader": "^7.2.0",
20 |     "webpack": "^1.12.2"
21 |   },
22 |   "scripts": {
23 |     "build": "webpack",
24 |     "dev": "webpack --watch"
25 |   },
26 |   "author": "",
27 |   "license": "MIT"
28 | }
29 | 


--------------------------------------------------------------------------------
/.client/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: "./main.js",
 5 |   output: {
 6 |     path: path.resolve(__dirname, '../public'),
 7 |     publicPath: '/',
 8 |     filename: "build.js"
 9 |   },
10 |   module: {
11 |     loaders: [
12 |       { test: /\.vue$/, loader: 'vue' },
13 |       { test: /\.(png|jpg|gif)$/, loader: 'file?name=[name].[ext]?[hash]' }
14 |     ]
15 |   },
16 |   devtool: 'inline-source-map'
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public/*
3 | 


--------------------------------------------------------------------------------
/.meteor/.finished-upgraders:
--------------------------------------------------------------------------------
 1 | # This file contains information which helps Meteor properly upgrade your
 2 | # app when you run 'meteor update'. You should check it into version control
 3 | # with your project.
 4 | 
 5 | notices-for-0.9.0
 6 | notices-for-0.9.1
 7 | 0.9.4-platform-file
 8 | notices-for-facebook-graph-api-2
 9 | 1.2.0-standard-minifiers-package
10 | 1.2.0-meteor-platform-split
11 | 1.2.0-cordova-changes
12 | 1.2.0-breaking-changes
13 | 


--------------------------------------------------------------------------------
/.meteor/.gitignore:
--------------------------------------------------------------------------------
1 | local
2 | 


--------------------------------------------------------------------------------
/.meteor/.id:
--------------------------------------------------------------------------------
1 | # This file contains a token that is unique to your project.
2 | # Check it into your repository along with the rest of this directory.
3 | # It can be used for purposes such as:
4 | #   - ensuring you don't accidentally deploy one app on top of another
5 | #   - providing package authors with aggregated statistics
6 | 
7 | 18bc5qx10b63kp1ym9b3a
8 | 


--------------------------------------------------------------------------------
/.meteor/packages:
--------------------------------------------------------------------------------
 1 | # Meteor packages used by this project, one per line.
 2 | # Check this file (and the other files in this directory) into your repository.
 3 | #
 4 | # 'meteor add' and 'meteor remove' will edit this file for you,
 5 | # but you can also edit it by hand.
 6 | 
 7 | insecure
 8 | standard-minifiers
 9 | meteor-base
10 | mobile-experience
11 | mongo
12 | blaze-html-templates
13 | session
14 | jquery
15 | tracker
16 | logging
17 | reload
18 | random
19 | ejson
20 | spacebars
21 | check
22 | 


--------------------------------------------------------------------------------
/.meteor/platforms:
--------------------------------------------------------------------------------
1 | server
2 | browser
3 | 


--------------------------------------------------------------------------------
/.meteor/release:
--------------------------------------------------------------------------------
1 | METEOR@1.2.1
2 | 


--------------------------------------------------------------------------------
/.meteor/versions:
--------------------------------------------------------------------------------
 1 | autoupdate@1.2.4
 2 | babel-compiler@5.8.24_1
 3 | babel-runtime@0.1.4
 4 | base64@1.0.4
 5 | binary-heap@1.0.4
 6 | blaze@2.1.3
 7 | blaze-html-templates@1.0.1
 8 | blaze-tools@1.0.4
 9 | boilerplate-generator@1.0.4
10 | caching-compiler@1.0.0
11 | caching-html-compiler@1.0.2
12 | callback-hook@1.0.4
13 | check@1.1.0
14 | ddp@1.2.2
15 | ddp-client@1.2.1
16 | ddp-common@1.2.2
17 | ddp-server@1.2.2
18 | deps@1.0.9
19 | diff-sequence@1.0.1
20 | ecmascript@0.1.6
21 | ecmascript-runtime@0.2.6
22 | ejson@1.0.7
23 | fastclick@1.0.7
24 | geojson-utils@1.0.4
25 | hot-code-push@1.0.0
26 | html-tools@1.0.5
27 | htmljs@1.0.5
28 | http@1.1.1
29 | id-map@1.0.4
30 | insecure@1.0.4
31 | jquery@1.11.4
32 | launch-screen@1.0.4
33 | livedata@1.0.15
34 | logging@1.0.8
35 | meteor@1.1.10
36 | meteor-base@1.0.1
37 | minifiers@1.1.7
38 | minimongo@1.0.10
39 | mobile-experience@1.0.1
40 | mobile-status-bar@1.0.6
41 | mongo@1.1.3
42 | mongo-id@1.0.1
43 | npm-mongo@1.4.39_1
44 | observe-sequence@1.0.7
45 | ordered-dict@1.0.4
46 | promise@0.5.1
47 | random@1.0.5
48 | reactive-dict@1.1.3
49 | reactive-var@1.0.6
50 | reload@1.1.4
51 | retry@1.0.4
52 | routepolicy@1.0.6
53 | session@1.1.1
54 | spacebars@1.0.7
55 | spacebars-compiler@1.0.7
56 | standard-minifiers@1.0.2
57 | templating@1.1.5
58 | templating-tools@1.0.0
59 | tracker@1.0.9
60 | ui@1.0.8
61 | underscore@1.0.4
62 | url@1.0.5
63 | webapp@1.2.3
64 | webapp-hashing@1.0.5
65 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Webpack + Vue + Meteor Example
 2 | 
 3 | Example using Vue with Meteor, while leveraging the normal Webpack + NPM workflow for your front-end.
 4 | 
 5 | ``` bash
 6 | cd .client
 7 | npm install
 8 | npm run dev
 9 | 
10 | # at project root in another terminal
11 | meteor
12 | ```
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |   <title>webpack-test</title>
 3 |   <script src="/build.js"></script>
 4 | </head>
 5 | 
 6 | <body>
 7 |   <h1>Welcome to Meteor!</h1>
 8 | 
 9 |   <div id="app"></div>
10 | </body>
11 | 


--------------------------------------------------------------------------------
/lib/collections.js:
--------------------------------------------------------------------------------
1 | Todos = new Mongo.Collection('todos')
2 | 
3 | if (Meteor.isServer) {
4 |   Meteor.publish('todos', function () {
5 |     return Todos.find()
6 |   })
7 | }
8 | 


--------------------------------------------------------------------------------
/lib/methods.js:
--------------------------------------------------------------------------------
1 | Meteor.methods({
2 |   addTodo: function (text) {
3 |     Todos.insert({ text: text })
4 |   },
5 |   removeTodo: function (id) {
6 |     Todos.remove(id)
7 |   }
8 | })
9 | 


--------------------------------------------------------------------------------