├── .meteor
    ├── .gitignore
    ├── release
    ├── platforms
    ├── .id
    ├── .finished-upgraders
    ├── packages
    └── versions
├── .vueignore
├── .postcssrc
├── .gitignore
├── src
    ├── imports
    │   ├── ui
    │   │   ├── style
    │   │   │   ├── colors.scss
    │   │   │   ├── colors.styl
    │   │   │   ├── vars.scss
    │   │   │   ├── vars.styl
    │   │   │   ├── colors.less
    │   │   │   ├── imports.less
    │   │   │   ├── transitions.less
    │   │   │   └── main.less
    │   │   ├── App.vue
    │   │   ├── App.html
    │   │   ├── NotFound.vue
    │   │   ├── App.js
    │   │   ├── Async.vue
    │   │   ├── Items.vue
    │   │   ├── Home.vue
    │   │   ├── Pokemon.vue
    │   │   ├── Apollo.vue
    │   │   ├── Cart.vue
    │   │   ├── GoogleMap.vue
    │   │   ├── About.vue
    │   │   ├── AppNav.vue
    │   │   ├── NotesComponents.vue
    │   │   ├── NotesComputed.vue
    │   │   └── Notes.vue
    │   ├── supply
    │   │   ├── index.js
    │   │   ├── base.js
    │   │   └── Items.js
    │   ├── filters.js
    │   ├── store
    │   │   ├── index.js
    │   │   ├── items
    │   │   │   └── index.js
    │   │   └── layout
    │   │   │   └── index.js
    │   ├── client.js
    │   ├── api
    │   │   ├── collections.js
    │   │   ├── publications.js
    │   │   ├── methods.js
    │   │   └── apollo.js
    │   ├── plugins.js
    │   ├── routes.js
    │   ├── app.js
    │   └── server.js
    ├── index.js
    └── index.html
├── .babelrc
├── .github
    └── FUNDING.yml
├── public
    └── vue+meteor.png
├── README.md
└── package.json


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


--------------------------------------------------------------------------------
/.vueignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


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


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


--------------------------------------------------------------------------------
/.postcssrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": []
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | /packages
3 | .cache
4 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/colors.scss:
--------------------------------------------------------------------------------
1 | $app-color: #40b883;
2 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/colors.styl:
--------------------------------------------------------------------------------
1 | $app-color = #40b883;
2 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/vars.scss:
--------------------------------------------------------------------------------
1 | @import './colors';
2 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/vars.styl:
--------------------------------------------------------------------------------
1 | @import './colors.styl'
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": [
3 |     "transform-vue-jsx"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: Akryum
4 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/colors.less:
--------------------------------------------------------------------------------
1 | @app-color: #40b883;
2 | @page-background: darken(white, 2%);
3 | 


--------------------------------------------------------------------------------
/public/vue+meteor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/meteor-vue/vue-meteor-demo/HEAD/public/vue+meteor.png


--------------------------------------------------------------------------------
/src/imports/supply/index.js:
--------------------------------------------------------------------------------
1 | import { register } from 'vue-supply'
2 | 
3 | import Items from './Items'
4 | register('Items', Items)
5 | 


--------------------------------------------------------------------------------
/src/imports/filters.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment'
2 | 
3 | export function date (value) {
4 |   return moment(value).format('DD/MM/YYYY')
5 | }
6 | 


--------------------------------------------------------------------------------
/src/imports/ui/App.vue:
--------------------------------------------------------------------------------
1 | <template src="App.html" />
2 | 
3 | <script src="App.js">
4 | </script>
5 | 
6 | <style lang="less" src="style/main.less" />
7 | 


--------------------------------------------------------------------------------
/src/imports/ui/App.html:
--------------------------------------------------------------------------------
 1 | <div id="app">
 2 |   <app-nav />
 3 | 
 4 |   <main>
 5 |     <router-view />
 6 |   </main>
 7 | 
 8 |   <cart v-if="showCart" />
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './imports/api/methods'
2 | 
3 | if (Meteor.isClient) {
4 |   import './imports/client'
5 | } else if (Meteor.isServer) {
6 |   import './imports/server'
7 | }
8 | 


--------------------------------------------------------------------------------
/src/imports/store/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import layout from './layout'
 3 | import items from './items'
 4 | 
 5 | export default {
 6 |   modules: {
 7 |     layout,
 8 |     items,
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/src/imports/client.js:
--------------------------------------------------------------------------------
 1 | import 'intersection-observer'
 2 | import 'vue-googlemaps/dist/vue-googlemaps.css'
 3 | 
 4 | import { Meteor } from 'meteor/meteor'
 5 | import CreateApp from './app'
 6 | 
 7 | Meteor.startup(() => {
 8 |   CreateApp({
 9 |     ssr: false,
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/imports.less:
--------------------------------------------------------------------------------
 1 | @import "colors";
 2 | 
 3 | @ease: cubic-bezier(0.4, 0.0, 0.2, 1);
 4 | 
 5 | .bounds(@d: 0) {
 6 |   top: @d;
 7 |   bottom: @d;
 8 |   left: @d;
 9 |   right: @d;
10 | }
11 | 
12 | .overlay() {
13 |   position: absolute;
14 |   .bounds(0);
15 | }
16 | 


--------------------------------------------------------------------------------
/src/imports/ui/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <!-- <template>
 2 |   <div class="home">
 3 |     <h1>#404</h1>
 4 |   </div>
 5 | </template> -->
 6 | 
 7 | <script>
 8 | export default {
 9 |   render (h) {
10 |     return <div class="home">
11 |       <h1>#404</h1>
12 |     </div>
13 |   }
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/imports/ui/App.js:
--------------------------------------------------------------------------------
 1 | import { mapGetters } from 'vuex'
 2 | import AppNav from './AppNav.vue'
 3 | import Cart from './Cart.vue'
 4 | 
 5 | export default {
 6 |   components: {
 7 |     AppNav,
 8 |     Cart,
 9 |   },
10 | 
11 |   computed: {
12 |     ...mapGetters('layout', [
13 |       'showCart',
14 |     ]),
15 |   },
16 | }
17 | 


--------------------------------------------------------------------------------
/src/imports/api/collections.js:
--------------------------------------------------------------------------------
 1 | import { Mongo } from 'meteor/mongo'
 2 | import { Meteor } from 'meteor/meteor';
 3 | 
 4 | export const Notes = new Mongo.Collection('notes')
 5 | export const Items = new Mongo.Collection('items')
 6 | 
 7 | if (Meteor.isServer) {
 8 |   Notes.rawCollection().createIndex({
 9 |     text: 'text',
10 |   })
11 | }
12 | 


--------------------------------------------------------------------------------
/src/imports/supply/base.js:
--------------------------------------------------------------------------------
 1 | import { Supply } from 'vue-supply'
 2 | 
 3 | export default {
 4 |   extends: Supply,
 5 | 
 6 |   methods: {
 7 |     activate () {
 8 |       this.$startMeteor()
 9 |     },
10 | 
11 |     deactivate () {
12 |       this.$stopMeteor()
13 |     },
14 |   },
15 | 
16 |   meteor: {
17 |     $lazy: true,
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/.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 | 2hatbj135zp4v16mq0iz
8 | 


--------------------------------------------------------------------------------
/src/imports/store/items/index.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   namespaced: true,
 3 | 
 4 |   supply: {
 5 |     use: ['Items'],
 6 |     inject: ({ Items }) => ({
 7 |       getters: {
 8 |         'all-items': () => Items.items,
 9 |       },
10 |     }),
11 |   },
12 | 
13 |   getters: {
14 |     'count': (state, getters) => getters['all-items'].length,
15 |   },
16 | }
17 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |   <meta charset="utf-8"/>
 3 |   <title>Vue+Meteor Demo App</title>
 4 |    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
 5 |    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 6 | </head>
 7 | 
 8 | <body>
 9 |   <div class="app-wrapper">
10 |     <div id="app"></div>
11 |   </div>
12 | </body>
13 | 


--------------------------------------------------------------------------------
/src/imports/supply/Items.js:
--------------------------------------------------------------------------------
 1 | import base from './base'
 2 | import { Items } from '../api/collections'
 3 | 
 4 | export default {
 5 |   extends: base,
 6 | 
 7 |   meteor: {
 8 |     $subscribe: {
 9 |       'items': [],
10 |     },
11 | 
12 |     items () {
13 |       return Items.find({})
14 |     },
15 |   },
16 | 
17 |   watch: {
18 |     items (value) {
19 |       console.log('items watch', value)
20 |     },
21 |   },
22 | }
23 | 


--------------------------------------------------------------------------------
/src/imports/store/layout/index.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   namespaced: true,
 3 | 
 4 |   state: () => ({
 5 |     showCart: false,
 6 |   }),
 7 | 
 8 |   getters: {
 9 |     showCart: state => state.showCart,
10 |   },
11 | 
12 |   mutations: {
13 |     showCart: (state, value) => {
14 |       state.showCart = value
15 |     },
16 |   },
17 | 
18 |   actions: {
19 |     showCart({ commit }, value) {
20 |       commit('showCart', value)
21 |     }
22 |   },
23 | }
24 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/transitions.less:
--------------------------------------------------------------------------------
 1 | @import "imports";
 2 | 
 3 | .right-panel-enter-active,
 4 | .right-panel-leave-active {
 5 |   overflow: hidden;
 6 | 
 7 |   .backdrop {
 8 |     transition: opacity .5s;
 9 |   }
10 | 
11 |   .panel {
12 |     transition: transform .5s @ease, box-shadow .5s;
13 |   }
14 | }
15 | 
16 | .right-panel-enter,
17 | .right-panel-leave-to {
18 |   .backdrop {
19 |     opacity: 0;
20 |   }
21 | 
22 |   .panel {
23 |     transform: translateX(100%);
24 |     box-shadow: none;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/imports/api/publications.js:
--------------------------------------------------------------------------------
 1 | import { Meteor } from 'meteor/meteor'
 2 | import { Notes, Items } from './collections'
 3 | 
 4 | Meteor.publish('notes', function (filter) {
 5 |   let selector
 6 |   if (filter) {
 7 |     selector = {
 8 |       $text: {
 9 |         $search: filter,
10 |       },
11 |     }
12 |   } else {
13 |     selector = {}
14 |   }
15 |   return Notes.find(selector, {
16 |     sort: { created: -1 },
17 |   })
18 | })
19 | 
20 | Meteor.publish('items', function () {
21 |   return Items.find({})
22 | })
23 | 


--------------------------------------------------------------------------------
/src/imports/ui/Async.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="loading">Loading...</div>
 4 |     <component v-else :is="comp"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       comp: null,
13 |       loading: true,
14 |     }
15 |   },
16 | 
17 |   async mounted () {
18 |     /* Eager */
19 |     // this.comp = require('./Svg.vue').default
20 | 
21 |     /* Easy */
22 |     this.comp = await import('./Svg.vue').then(m => m.default)
23 | 
24 |     this.loading = false
25 |   },
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/imports/ui/Items.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="items">
 3 |     <h1>{{ count }} Item(s)</h1>
 4 |     <div v-for="item of items">
 5 |       {{ item.name }}
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import { use } from 'vue-supply'
12 | import { mapGetters } from 'vuex'
13 | 
14 | export default {
15 |   mixins: [
16 |     use('Items'),
17 |   ],
18 | 
19 |   computed: {
20 |     ...mapGetters({
21 |       count: 'items/count',
22 |     }),
23 | 
24 |     items () {
25 |       return this.$supply.Items.items
26 |     },
27 |   },
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # (WIP) vue-meteor-demo
 2 | A comprehensive demo project, using Meteor &amp; Vue.
 3 | 
 4 | This is a work in progress. Contribute by opening Issues and submitting PRs!
 5 | 
 6 | Clone the project and navigate into its directory. Then install the npm dependencies:
 7 | 
 8 | ```
 9 | meteor npm i
10 | ```
11 | 
12 | To start the app, use the usual `meteor` command.
13 | 
14 | ---
15 | 
16 | WIP
17 | 
18 | ```
19 | meteor create --bare <some_folder>
20 | cd <some_folder>
21 | meteor remove blaze-templates reactive-var
22 | meteor add static-html akryum:vue-component akryum:vue-ssr
23 | ```
24 | 


--------------------------------------------------------------------------------
/src/imports/api/methods.js:
--------------------------------------------------------------------------------
 1 | import { Meteor } from 'meteor/meteor'
 2 | import { SimpleSchema } from 'meteor/aldeed:simple-schema'
 3 | import { Notes } from './collections'
 4 | 
 5 | Meteor.methods({
 6 |   ['notes.add'] (args) {
 7 |     new SimpleSchema({
 8 |       text: { type: String },
 9 |     }).validate(args)
10 | 
11 |     const { text } = args
12 | 
13 |     Notes.insert({
14 |       text,
15 |       created: new Date(),
16 |     })
17 |   },
18 | 
19 |   ['notes.remove'] (args) {
20 |     new SimpleSchema({
21 |       _id:  { type: String },
22 |     }).validate(args)
23 | 
24 |     const { _id } = args
25 | 
26 |     Notes.remove(_id)
27 |   },
28 | })
29 | 


--------------------------------------------------------------------------------
/.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 | 1.3.0-split-minifiers-package
14 | 1.4.0-remove-old-dev-bundle-link
15 | 1.4.1-add-shell-server-package
16 | 1.4.3-split-account-service-packages
17 | 1.5-add-dynamic-import-package
18 | 1.7-split-underscore-from-meteor-base
19 | 1.8.3-split-jquery-from-blaze
20 | 


--------------------------------------------------------------------------------
/src/imports/plugins.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import VueRouter from 'vue-router'
 4 | Vue.use(VueRouter)
 5 | 
 6 | import Vuex from 'vuex'
 7 | Vue.use(Vuex)
 8 | 
 9 | // Meteor Tracker integration
10 | import VueMeteorTracker from 'vue-meteor-tracker'
11 | Vue.use(VueMeteorTracker)
12 | Vue.config.meteor.freeze = true
13 | console.log('tracker installed')
14 | 
15 | import VueGoogleMaps from 'vue-googlemaps'
16 | Vue.use(VueGoogleMaps, {
17 |   load: {
18 |     apiKey: 'AIzaSyCV908coKxEB_GcWuGucl79Zy_rIG4GQSI',
19 |     libraries: ['places'],
20 |   },
21 | })
22 | 
23 | import VueSupply from 'vue-supply'
24 | Vue.use(VueSupply)
25 | 
26 | import VueObserveVisibility from 'vue-observe-visibility'
27 | Vue.use(VueObserveVisibility)
28 | 
29 | import VueApollo from 'vue-apollo'
30 | Vue.use(VueApollo)
31 | 
32 | import * as filters from './filters'
33 | for (const key in filters) {
34 |   Vue.filter(key, filters[key])
35 | }
36 | 


--------------------------------------------------------------------------------
/src/imports/ui/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <p>
 4 |       <img src="/vue%2Bmeteor.png"/>
 5 |     </p>
 6 |     <p>Work in progress... <a href="https://github.com/Akryum/vue-meteor-demo">Contribute!</a></p>
 7 |     <p>This application is a complete demo project using Meteor and Vue. It features routing and SSR, and more (vuex, apollo, accounts...) will be added soon.</p>
 8 |     <p><a href="https://github.com/Akryum/vue-meteor/" target="_blank">More info</a></p>
 9 | 
10 |     <p>{{ counter }}</p>
11 |     <p><button @click="onClick">Increment</button></p>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   data () {
18 |     return {
19 |       counter: 0,
20 |     }
21 |   },
22 | 
23 |   methods: {
24 |     onClick () {
25 |       this.counter++
26 |     },
27 |   },
28 | }
29 | </script>
30 | 
31 | 
32 | <style lang="less" scoped>
33 | .home {
34 |   text-align: center;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/imports/ui/Pokemon.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   props: {
 4 |     pokemon: {
 5 |       type: Object,
 6 |       required: true,
 7 |     },
 8 |   },
 9 | 
10 |   computed: {
11 |     sprite () {
12 |       return JSON.parse(this.pokemon.sprites[0].sprites).front_default
13 |     },
14 |   },
15 | }
16 | </script>
17 | 
18 | <template>
19 |   <div class="pokemon">
20 |     <div class="img">
21 |       <img :src="sprite" :alt="pokemon.name" />
22 |     </div>
23 |     <div class="name">
24 |       {{ pokemon.name }}
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <style lang="less" scoped>
30 | .pokemon {
31 |   display: flex;
32 |   flex-direction: column;
33 |   align-items: center;
34 |   justify-content: center;
35 |   padding: 32px;
36 |   border: solid 1px fade(black, 10%);
37 |   border-radius: 4px;
38 | 
39 |   img {
40 |     max-width: 100%;
41 |   }
42 | 
43 |   .name::first-letter {
44 |     text-transform: uppercase;
45 |   }
46 | }
47 | </style>
48 |   


--------------------------------------------------------------------------------
/src/imports/ui/Apollo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="apollo">
 3 |     <div class="pokemons">
 4 |       <Pokemon
 5 |         v-for="pokemon of pokemons"
 6 |         :key="pokemon.id"
 7 |         :pokemon="pokemon"
 8 |       />
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import gql from 'graphql-tag'
15 | import Pokemon from './Pokemon.vue'
16 | 
17 | const mixin = {
18 |   apollo: {
19 |     pokemons: {
20 |       query: gql`query pokemons {
21 |         pokemons: pokemon_v2_pokemon (limit: 15) {
22 |           id
23 |           name
24 |           sprites: pokemon_v2_pokemonsprites {
25 |             id
26 |             sprites
27 |           }
28 |         }
29 |       }`,
30 |       prefetch: true,
31 |     },
32 |   },
33 | }
34 | 
35 | export default {
36 |   components: {
37 |     Pokemon,
38 |   },
39 | 
40 |   mixins: [mixin],
41 | }
42 | </script>
43 | 
44 | <style scoped>
45 | .pokemons {
46 |   display: grid;
47 |   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
48 |   gap: 8px;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/imports/api/apollo.js:
--------------------------------------------------------------------------------
 1 | import { ApolloClient } from 'apollo-client'
 2 | import { HttpLink } from 'apollo-link-http'
 3 | import { InMemoryCache } from 'apollo-cache-inmemory'
 4 | 
 5 | // Create the apollo client
 6 | export function createApolloClient (ssr = false) {
 7 |   let initialState
 8 | 
 9 |   if (!ssr && typeof window !== 'undefined') {
10 |     const state = window.__APOLLO_STATE__
11 |     if (state) {
12 |       initialState = state.defaultClient
13 |     }
14 |     console.log(initialState)
15 |   }
16 | 
17 |   const httpLink = new HttpLink({
18 |     uri: 'https://beta.pokeapi.co/graphql/v1beta/'
19 |   })
20 | 
21 |   const cache = new InMemoryCache()
22 |   if (initialState) cache.restore(initialState)
23 | 
24 |   const apolloClient = new ApolloClient({
25 |     link: httpLink,
26 |     cache,
27 |     connectToDevTools: Meteor.isDevelopment,
28 |     ...(ssr ? {
29 |       ssrMode: true,
30 |     } : {
31 |       // This will temporary disable query force-fetching
32 |       ssrForceFetchDelay: 100,
33 |     }),
34 |   })
35 | 
36 |   return apolloClient
37 | }
38 | 


--------------------------------------------------------------------------------
/src/imports/routes.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import NotFound from './ui/NotFound.vue'
 4 | import Home from './ui/Home.vue'
 5 | import Items from './ui/Items.vue'
 6 | import Notes from './ui/Notes.vue'
 7 | import NotesComponents from './ui/NotesComponents.vue'
 8 | import NotesComputed from './ui/NotesComputed.vue'
 9 | import GoogleMap from './ui/GoogleMap.vue'
10 | import Apollo from './ui/Apollo.vue'
11 | import Async from './ui/Async.vue'
12 | import About from './ui/About.vue'
13 | 
14 | export default [
15 |   { path: '/', name: 'home', component: Home },
16 |   { path: '/shop', name: 'shop', component: Items },
17 |   { path: '/notes', name: 'notes', component: Notes, meta: { showCart: true } },
18 |   { path: '/notes-components', name: 'notes-components', component: NotesComponents },
19 |   { path: '/notes-computed', name: 'notes-computed', component: NotesComputed },
20 |   { path: '/map', name: 'map', component: GoogleMap },
21 |   { path: '/apollo', name: 'apollo', component: Apollo },
22 |   { path: '/async', name: 'async', component: Async },
23 |   { path: '/about', name: 'about', component: About },
24 |   { path: '*', name: 'not-found', component: NotFound },
25 | ]
26 | 


--------------------------------------------------------------------------------
/src/imports/ui/Cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition name="right-panel" duration="500" appear>
 3 |     <div class="cart-overlay">
 4 |       <div class="backdrop" @click="close" />
 5 |       <div class="panel" :class="$style.cart">
 6 |         <div class="empty-text" :class="$style.meow">
 7 |           Your cart is <span :class="foo.bar">empty</span>
 8 |           </div>
 9 |       </div>
10 |     </div>
11 |   </transition>
12 | </template>
13 | 
14 | <script>
15 | import { mapActions } from 'vuex'
16 | 
17 | export default {
18 |   created () {
19 |     console.log(this.$style)
20 |   },
21 | 
22 |   methods: {
23 |     ...mapActions('layout', [
24 |       'showCart'
25 |     ]),
26 | 
27 |     close () {
28 |       this.showCart(false)
29 |     },
30 |   },
31 | }
32 | </script>
33 | 
34 | <style lang="less" scoped>
35 | @import "style/imports";
36 | 
37 | .cart-overlay {
38 |   .overlay;
39 | }
40 | </style>
41 | 
42 | <style lang="less" module>
43 | .cart {
44 |   position: absolute;
45 |   top: 0;
46 |   bottom: 0;
47 |   right: 0;
48 |   width: 100%;
49 |   max-width: 500px;
50 | }
51 | 
52 | .meow {
53 |   color: grey;
54 | }
55 | </style>
56 | 
57 | <style lang="less" module="foo">
58 | .bar {
59 |   color: black;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-meteor-demo",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "start": "meteor run"
 6 |   },
 7 |   "dependencies": {
 8 |     "@babel/runtime": "^7.4.4",
 9 |     "apollo-cache-inmemory": "^1.5.1",
10 |     "apollo-client": "^2.5.1",
11 |     "apollo-link": "^1.2.11",
12 |     "apollo-link-http": "^1.5.14",
13 |     "bcrypt": "^5.0.1",
14 |     "core-js": "^3.0.1",
15 |     "graphql": "^14.3.0",
16 |     "graphql-tag": "^2.10.1",
17 |     "intersection-observer": "^0.12.2",
18 |     "isomorphic-fetch": "^3.0.0",
19 |     "lodash": "^4.17.15",
20 |     "marker-clusterer-plus": "^2.1.4",
21 |     "meteor-node-stubs": "^1.2.5",
22 |     "moment": "^2.24.0",
23 |     "vue": "2.6.10",
24 |     "vue-apollo": "^3.1.0",
25 |     "vue-googlemaps": "^0.1.2",
26 |     "vue-meteor-tracker": "^2.0.0-beta.5",
27 |     "vue-observe-visibility": "^0.4.4",
28 |     "vue-router": "^3.0.6",
29 |     "vue-supply": "^0.3.0",
30 |     "vuex": "^3.1.1",
31 |     "vuex-router-sync": "^5.0.0"
32 |   },
33 |   "devDependencies": {
34 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
35 |     "babel-plugin-syntax-jsx": "^6.18.0",
36 |     "babel-plugin-transform-vue-jsx": "^3.7.0",
37 |     "vue-template-compiler": "2.6.10"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/.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 | meteor-base@1.5.1             # Packages every Meteor app needs to have
 8 | mobile-experience@1.1.0       # Packages for a great mobile UX
 9 | mongo@1.15.0                   # The database Meteor supports right now
10 | tracker@1.2.0                 # Meteor's client-side reactive programming library
11 | 
12 | standard-minifier-css@1.8.1   # CSS minifier run for production mode
13 | standard-minifier-js@2.8.0    # JS minifier run for production mode
14 | es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers.
15 | ecmascript@0.16.2             # Enable ECMAScript2015+ syntax in app code
16 | shell-server@0.5.0            # Server-side component of the `meteor shell` command
17 | 
18 | static-html@1.3.2
19 | 
20 | akryum:vue-component
21 | akryum:vue-less
22 | akryum:vue-ssr
23 | aldeed:simple-schema
24 | deanius:promise
25 | dynamic-import@0.7.2
26 | akryum:vue-stylus
27 | akryum:vue-sass
28 | akryum:vue-coffee
29 | akryum:vue-pug
30 | accounts-password@2.3.1
31 | underscore@1.0.10
32 | 


--------------------------------------------------------------------------------
/src/imports/ui/GoogleMap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map">
 3 |     <div class="toolbar">
 4 |       <button
 5 |         :disabled="!userPosition"
 6 |         @click="centerOnUser">
 7 |         Center on user
 8 |       </button>
 9 |     </div>
10 | 
11 |     <!-- Map -->
12 |     <googlemaps-map
13 |       class="gmap"
14 |       :center.sync="center"
15 |       :zoom.sync="zoom"
16 |       map-type-id="terrain">
17 | 
18 |       <!-- User Position -->
19 | 			<googlemaps-user-position
20 | 				@update:position="setUserPosition" />
21 | 
22 | 			<!-- Marker -->
23 | 			<googlemaps-marker
24 | 				title="Paris"
25 | 				:position="{ lat: 48.8735, lng: 2.2951 }" />
26 |     </googlemaps-map>
27 |   </div>
28 | </template>
29 | 
30 | <script lang="coffee">
31 | export default
32 |   data: ->
33 |     return
34 |       center:
35 |         lat: 48.85661400000001
36 |         lng: 2.3522219000000177
37 |       userPosition: null
38 |       zoom: 12
39 | 
40 |   methods:
41 |     centerOnUser: ->
42 |       if @userPosition
43 |         @center = @userPosition
44 | 
45 |     setUserPosition: (position) ->
46 |       @userPosition = position
47 | </script>
48 | 
49 | <style lang="stylus" scoped>
50 | .toolbar
51 |   margin-bottom 24px
52 | 
53 | .gmap
54 |   width 100%
55 |   height 300px
56 | </style>
57 | 


--------------------------------------------------------------------------------
/src/imports/app.js:
--------------------------------------------------------------------------------
 1 | import 'isomorphic-fetch'
 2 | 
 3 | import './plugins'
 4 | import './supply'
 5 | 
 6 | import Vue from 'vue'
 7 | import VueRouter from 'vue-router'
 8 | import Vuex from 'vuex'
 9 | import { sync } from 'vuex-router-sync'
10 | import VueApollo from 'vue-apollo'
11 | import { createApolloClient } from './api/apollo'
12 | import { injectSupply } from 'vue-supply'
13 | import App from './ui/App.vue'
14 | import routes from './routes'
15 | import storeOptions from './store'
16 | 
17 | function createApp (context) {
18 |   const router = new VueRouter({
19 |     mode: 'history',
20 |     routes,
21 |   })
22 | 
23 |   const supplyCache = {}
24 |   const suppliedStoreOptions = injectSupply(storeOptions, supplyCache)
25 |   const store = new Vuex.Store(suppliedStoreOptions)
26 | 
27 |   // sync the router with the vuex store.
28 |   // this registers `store.state.route`
29 |   sync(store, router)
30 | 
31 |   // Apollo
32 |   const apolloClient = createApolloClient(context.ssr)
33 |   const apolloProvider = new VueApollo({
34 |     defaultClient: apolloClient,
35 |   })
36 | 
37 |   return {
38 |     app: new Vue({
39 |       el: '#app',
40 |       router,
41 |       store,
42 |       apolloProvider,
43 |       supplyCache,
44 |       ...App,
45 |     }),
46 |     router,
47 |     store,
48 |     apolloProvider,
49 |   }
50 | }
51 | 
52 | export default createApp
53 | 


--------------------------------------------------------------------------------
/src/imports/ui/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>About this demo project</h1>
 4 |     <p>
 5 |       Using Meteor and Vue together!
 6 |     </p>
 7 |     <p>
 8 |       This app is SSR-enabled!
 9 |     </p>
10 |     <p>
11 |       <a href="https://github.com/Akryum/vue-meteor-demo">Sources</a>
12 |     </p>
13 |     <h2>Technologies &amp; Libraries</h2>
14 |     <ul>
15 |       <li>Meteor</li>
16 |       <li>Vue 2.x</li>
17 |       <li>Less, Sass, Stylus</li>
18 |       <li>Apollo GraphQL, vue-apollo</li>
19 |       <li>vue-supply</li>
20 |       <li>vue2-google-maps</li>
21 |       <li>moment</li>
22 |     </ul>
23 |   </div>
24 | </template>
25 | 
26 | <style scoped>
27 | p,
28 | ul {
29 |   padding: 32px;
30 | }
31 | 
32 | ul {
33 |   padding-left: 50px;
34 | }
35 | </style>
36 | 
37 | <style lang="scss" scoped>
38 | @import '~src/imports/ui/style/vars';
39 | 
40 | p,
41 | ul {
42 |   border-left: solid 2px $app-color;
43 | }
44 | </style>
45 | 
46 | <style lang="scss" scoped>
47 | @import 'style/vars';
48 | 
49 | p,
50 | ul {
51 |   border-right: solid 2px $app-color;
52 | }
53 | </style>
54 | 
55 | <style lang="stylus" scoped>
56 | @import '~src/imports/ui/style/vars';
57 | 
58 | p,
59 | ul {
60 |   border-top: solid 2px $app-color;
61 | }
62 | </style>
63 | 
64 | <style lang="stylus" scoped>
65 | @import 'style/vars';
66 | 
67 | p,
68 | ul {
69 |   border-bottom: solid 2px $app-color;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/imports/ui/style/main.less:
--------------------------------------------------------------------------------
 1 | @import "imports";
 2 | 
 3 | @import "transitions";
 4 | 
 5 | * {
 6 |   box-sizing: border-box;
 7 | }
 8 | 
 9 | body {
10 |   margin: 0;
11 |   background: @page-background;
12 | }
13 | 
14 | body,
15 | input,
16 | textarea,
17 | button {
18 |   font-size: 1rem;
19 |   font-family: 'Open Sans', sans-serif;
20 | }
21 | 
22 | a {
23 |   color: @app-color;
24 |   text-decoration: none;
25 | }
26 | 
27 | main {
28 |   max-width: 800px;
29 |   margin: 64px auto;
30 |   padding: 42px;
31 |   background: white;
32 | }
33 | 
34 | h1,
35 | h2 {
36 |   font-weight: lighter;
37 | 
38 |   &:first-child {
39 |     margin-top: 0;
40 |   }
41 | }
42 | 
43 | input {
44 |   border: none;
45 |   background: white;
46 |   border-bottom: solid 1px darken(white, 30%);
47 |   padding: 8px 12px;
48 | 
49 |   &:focus {
50 |     border-bottom-color: @app-color;
51 |     outline: none;
52 |   }
53 | }
54 | 
55 | button {
56 |   padding: 8px 12px;
57 |   background: @app-color;
58 |   color: white;
59 |   border: none;
60 |   border-radius: 3px;
61 |   cursor: pointer;
62 | 
63 |   &:hover {
64 |     background: lighten(@app-color, 10%);
65 |   }
66 | }
67 | 
68 | button[disabled=disabled], button:disabled {
69 |   opacity: 0.4;
70 |   cursor: not-allowed;
71 | }
72 | 
73 | .backdrop {
74 |   background: fade(black, 50%);
75 |   .overlay;
76 | }
77 | 
78 | .panel {
79 |   background: white;
80 |   box-shadow: 0 0 20px fade(black, 30%);
81 | }
82 | 
83 | .empty-text {
84 |   text-align: center;
85 |   margin: 64px 24px;
86 |   font-size: 1.2rem;
87 |   color: fade(black, 30%);
88 | }
89 | 


--------------------------------------------------------------------------------
/src/imports/ui/AppNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav>
 3 |     <div class="app-title">Vue+Meteor</div>
 4 |     <router-link :to="{ name: 'home' }" exact>Home</router-link>
 5 |     <router-link :to="{ name: 'shop' }">Shop</router-link>
 6 |     <router-link :to="{ name: 'notes' }">Notes</router-link>
 7 |     <router-link :to="{ name: 'map' }">Map</router-link>
 8 |     <router-link :to="{ name: 'apollo' }">Apollo</router-link>
 9 |     <router-link :to="{ name: 'async' }">Async</router-link>
10 |     <router-link :to="{ name: 'about' }">About</router-link>
11 |     <div class="actions">
12 |       <button @click="openCart"><i class="material-icons">shopping_cart</i></button>
13 |     </div>
14 |   </nav>
15 | </template>
16 | 
17 | <script>
18 | import { mapActions } from 'vuex'
19 | 
20 | export default {
21 |   methods: {
22 |     ...mapActions('layout', [
23 |       'showCart'
24 |     ]),
25 | 
26 |     openCart () {
27 |       this.showCart(true)
28 |     },
29 |   },
30 | }
31 | </script>
32 | 
33 | <style lang="less" scoped>
34 | @import "style/imports";
35 | 
36 | nav {
37 |   background: @app-color;
38 |   display: flex;
39 |   flex-direction: row;
40 |   align-items: center;
41 |   color: white;
42 |   padding-top: 24px;
43 | 
44 |   > * {
45 |     flex: 0 0 auto;
46 |   }
47 | 
48 |   a {
49 |     color: white;
50 |     display: inline-block;
51 |     padding: 16px 28px;
52 |     border-radius: 3px 3px 0 0;
53 | 
54 |     &:hover {
55 |       background: lighten(@app-color, 10%);
56 |     }
57 | 
58 |     &.router-link-active {
59 |       background: @page-background;
60 |       color: @app-color;
61 |     }
62 |   }
63 | }
64 | 
65 | .app-title {
66 |   font-size: 1.3rem;
67 |   padding: 0 18px;
68 | }
69 | 
70 | .actions {
71 |   flex: 1 1 auto;
72 |   text-align: right;
73 |   padding: 4px 12px;
74 | }
75 | 
76 | </style>
77 | 


--------------------------------------------------------------------------------
/.meteor/versions:
--------------------------------------------------------------------------------
  1 | accounts-base@2.2.4
  2 | accounts-password@2.3.1
  3 | akryum:npm-check@0.1.2
  4 | akryum:vue-coffee@0.4.2
  5 | akryum:vue-component@0.15.2
  6 | akryum:vue-component-dev-client@0.4.7
  7 | akryum:vue-component-dev-server@0.1.4
  8 | akryum:vue-less@0.2.1
  9 | akryum:vue-pug@0.1.3
 10 | akryum:vue-sass@0.1.3
 11 | akryum:vue-ssr@0.5.0
 12 | akryum:vue-stylus@0.1.3
 13 | aldeed:simple-schema@1.5.4
 14 | allow-deny@1.1.1
 15 | autoupdate@1.8.0
 16 | babel-compiler@7.9.2
 17 | babel-runtime@1.5.1
 18 | base64@1.0.12
 19 | binary-heap@1.0.11
 20 | blaze-tools@1.1.3
 21 | boilerplate-generator@1.7.1
 22 | caching-compiler@1.2.2
 23 | caching-html-compiler@1.2.1
 24 | callback-hook@1.4.0
 25 | check@1.3.1
 26 | coffeescript@1.0.17
 27 | coffeescript-compiler@2.4.1
 28 | communitypackages:fast-render@4.0.6
 29 | communitypackages:inject-data@2.3.2
 30 | communitypackages:picker@1.1.0
 31 | cosmos:browserify@0.10.0
 32 | ddp@1.4.0
 33 | ddp-client@2.5.0
 34 | ddp-common@1.4.0
 35 | ddp-rate-limiter@1.1.0
 36 | ddp-server@2.5.0
 37 | deanius:promise@3.1.3
 38 | diff-sequence@1.1.1
 39 | dynamic-import@0.7.2
 40 | ecmascript@0.16.2
 41 | ecmascript-runtime@0.8.0
 42 | ecmascript-runtime-client@0.12.1
 43 | ecmascript-runtime-server@0.11.0
 44 | ejson@1.1.2
 45 | email@2.2.1
 46 | es5-shim@4.8.0
 47 | fetch@0.1.1
 48 | geojson-utils@1.0.10
 49 | hot-code-push@1.0.4
 50 | html-tools@1.1.3
 51 | htmljs@1.1.1
 52 | http@1.4.4
 53 | id-map@1.1.1
 54 | inter-process-messaging@0.1.1
 55 | launch-screen@1.3.0
 56 | livedata@1.0.18
 57 | localstorage@1.2.0
 58 | logging@1.3.1
 59 | mdg:validation-error@0.5.1
 60 | meteor@1.10.0
 61 | meteor-base@1.5.1
 62 | minifier-css@1.6.1
 63 | minifier-js@2.7.5
 64 | minimongo@1.8.0
 65 | mobile-experience@1.1.0
 66 | mobile-status-bar@1.1.0
 67 | modern-browsers@0.1.8
 68 | modules@0.18.0
 69 | modules-runtime@0.13.0
 70 | mongo@1.15.0
 71 | mongo-decimal@0.1.3
 72 | mongo-dev-server@1.1.0
 73 | mongo-id@1.0.8
 74 | montiapm:meteorx@2.2.0
 75 | npm-mongo@4.3.1
 76 | ordered-dict@1.1.0
 77 | promise@0.12.0
 78 | random@1.2.0
 79 | rate-limit@1.0.9
 80 | react-fast-refresh@0.2.3
 81 | reactive-var@1.0.11
 82 | reload@1.3.1
 83 | retry@1.1.0
 84 | routepolicy@1.1.1
 85 | server-render@0.4.0
 86 | service-configuration@1.3.0
 87 | sha@1.0.9
 88 | shell-server@0.5.0
 89 | socket-stream-client@0.5.0
 90 | spacebars-compiler@1.3.1
 91 | standard-minifier-css@1.8.2
 92 | standard-minifier-js@2.8.1
 93 | static-html@1.3.2
 94 | templating-tools@1.2.2
 95 | tracker@1.2.0
 96 | underscore@1.0.10
 97 | url@1.3.2
 98 | webapp@1.13.1
 99 | webapp-hashing@1.1.0
100 | 


--------------------------------------------------------------------------------
/src/imports/server.js:
--------------------------------------------------------------------------------
 1 | import './api/publications'
 2 | 
 3 | import Vue from 'vue'
 4 | import ApolloSSR from 'vue-apollo/ssr'
 5 | import { VueSSR } from 'meteor/akryum:vue-ssr'
 6 | import CreateApp from './app'
 7 | import App from './ui/App.vue'
 8 | 
 9 | const isDev = process.env.NODE_ENV !== 'production'
10 | 
11 | /*
12 | // Simple createApp
13 | VueSSR.createApp = function (context) {
14 |   const { app, router, store } = CreateApp()
15 |   
16 |   // set router's location
17 |   router.push(context.url)
18 |   
19 |   return app
20 | }
21 | */
22 | 
23 | Vue.use(ApolloSSR)
24 | 
25 | // This will be called each time the app is rendered
26 | VueSSR.createApp = function (context) {
27 |   const s = isDev && Date.now()
28 | 
29 |   return new Promise((resolve, reject) => {
30 |     const { app, router, store, apolloProvider } = CreateApp({
31 |       ssr: true,
32 |     })
33 | 
34 |     // set router's location
35 |     router.push(context.url)
36 | 
37 |     // wait until router has resolved possible async hooks
38 |     router.onReady(() => {
39 |       const matchedComponents = router.getMatchedComponents()
40 | 
41 |       // no matched routes
42 |       if (!matchedComponents.length) {
43 |         reject({ code: 404 })
44 |       }
45 | 
46 |       context.js = ''
47 | 
48 |       // Call preFetch hooks on components matched by the route.
49 |       // A preFetch hook dispatches a store action and returns a Promise,
50 |       // which is resolved when the action is complete and store state has been
51 |       // updated.
52 |       // Vuex Store prefetch
53 |       Promise.all(matchedComponents.map(component => {
54 |         return component.asyncData && component.asyncData({
55 |           store,
56 |           route: router.currentRoute,
57 |         })
58 |       })).then(() => {
59 |         context.rendered = () => {
60 |           isDev && console.log(`[SSR] Data prefetch: ${Date.now() - s}ms`)
61 | 
62 |           // After all preFetch hooks are resolved, our store is now
63 |           // filled with the state needed to render the app.
64 |           // Expose the state on the render context, and let the request handler
65 |           // inline the state in the HTML response. This allows the client-side
66 |           // store to pick-up the server-side state without having to duplicate
67 |           // the initial data fetching on the client.
68 | 
69 |           context.js += `window.__INITIAL_STATE__=${JSON.stringify(store.state)};`
70 |           context.js += ApolloSSR.exportStates(apolloProvider)
71 | 
72 |         }
73 |         resolve(app)
74 |       }).catch(reject)
75 |     })
76 |   })
77 | }
78 | 


--------------------------------------------------------------------------------
/src/imports/ui/NotesComponents.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="notes">
  3 |     <h1>Notes</h1>
  4 |     <input v-model="newNote" placeholder="Add a note" @keyup.enter="addNote" />
  5 |     <div class="actions">
  6 |       <button @click="sort = !sort">Toggle sort</button>
  7 |     </div>
  8 |     <div>
  9 |       <input v-model="search" placeholder="Search...">
 10 |     </div>
 11 | 
 12 |     <MeteorSub
 13 |       name="notes"
 14 |       :parameters="[search]"
 15 |     >
 16 |       <template slot-scope="{ loading }">
 17 |         <MeteorData
 18 |           :query="findNotes"
 19 |           class="notes"
 20 |         >
 21 |           <template slot-scope="{ data: notes }">
 22 |             <div v-for="note in notes" class="note" :class="{ many: notes.length > 1 }">
 23 |               <div class="text">{{ note.text }}</div>
 24 |               <div class="actions">
 25 |                 <button @click="event => removeNote(note)">Delete note</button>
 26 |                 <span class="date">{{ note.created | date }}</span>
 27 |               </div>
 28 |             </div>
 29 |           </template>
 30 |         </MeteorData>
 31 |         <div v-if="!$isServer" v-observe-visibility="handleVisibility"></div>
 32 |         <div v-if="loading" class="loading">Loading...</div>
 33 |       </template>
 34 |     </MeteorSub>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | import { Meteor } from 'meteor/meteor'
 40 | import { Notes } from '../api/collections'
 41 | 
 42 | export default {
 43 |   data () {
 44 |     return {
 45 |       newNote: '',
 46 |       search: '',
 47 |       sort: true,
 48 |     }
 49 |   },
 50 | 
 51 |   methods: {
 52 |     findNotes () {
 53 |       return Notes.find({}, {
 54 |         sort: { created: this.sort ? -1 : 1 },
 55 |       })
 56 |     },
 57 | 
 58 |     async addNote () {
 59 |       if (this.newNote) {
 60 |         try {
 61 |           await Meteor.callPromise('notes.add', {
 62 |             text: this.newNote,
 63 |           })
 64 |           this.newNote = ''
 65 |         } catch (e) {
 66 |           console.error(e)
 67 |         }
 68 |       }
 69 |     },
 70 | 
 71 |     async removeNote (note) {
 72 |       try {
 73 |         await Meteor.callPromise('notes.remove', {
 74 |           _id: note._id,
 75 |         })
 76 |       } catch (e) {
 77 |         console.error(e)
 78 |       }
 79 |     },
 80 | 
 81 |     handleVisibility (visible) {
 82 |       if (visible && this.$subReady.notes) {
 83 |         this.limit += 5
 84 |       }
 85 |     },
 86 |   },
 87 | }
 88 | </script>
 89 | 
 90 | <style lang="less" scoped>
 91 | .note {
 92 |   padding: 32px 0;
 93 | 
 94 |   &:not(:last-child) {
 95 |     border-bottom: solid 1px fade(black, 10%);
 96 |   }
 97 | 
 98 |   .text {
 99 |     margin-bottom: 12px;
100 |   }
101 | 
102 |   .date {
103 |     margin-left: 16px;
104 |     color: lighten(black, 70%);
105 |   }
106 | }
107 | 
108 | input {
109 |   display: block;
110 |   width: 100%;
111 | }
112 | 
113 | .actions {
114 |   margin-top: 6px;
115 | }
116 | </style>
117 | 


--------------------------------------------------------------------------------
/src/imports/ui/NotesComputed.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="notes">
  3 |     <h1>Notes</h1>
  4 |     <div>
  5 |       <input v-model="newNote" placeholder="Add a note" @keyup.enter="addNote" />
  6 |     </div>
  7 |     <div class="actions">
  8 |       <button @click="sort = !sort">Toggle sort</button>
  9 |     </div>
 10 |     <div>
 11 |       <input v-model="search" placeholder="Search...">
 12 |     </div>
 13 |     <div class="notes">
 14 |       <div v-for="note in notes" class="note" :class="{ many: notes.length > 1 }">
 15 |         <div class="text">{{ note.text }}</div>
 16 |         <div class="actions">
 17 |           <button @click="event => removeNote(note)">Delete note</button>
 18 |           <span class="date">{{ note.created | date }}</span>
 19 |         </div>
 20 |       </div>
 21 |     </div>
 22 |     <div v-if="!$isServer" v-observe-visibility="handleVisibility"></div>
 23 |     <div v-if="!$subReady.notes" class="loading">Loading...</div>
 24 |     <div>First: {{ firstNote }}</div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import { Meteor } from 'meteor/meteor'
 30 | import { Notes } from '../api/collections'
 31 | 
 32 | export default {
 33 |   data () {
 34 |     return {
 35 |       newNote: '',
 36 |       search: '',
 37 |       sort: true,
 38 |     }
 39 |   },
 40 | 
 41 |   created () {
 42 |     // Not SSR friendly (for now)
 43 |     this.$subscribe('notes', () => [this.search])
 44 |   },
 45 | 
 46 |   computed: {
 47 |     notes () {
 48 |       // Not SSR friendly (for now)
 49 |       return this.$autorun(() => Notes.find({}, {
 50 |         sort: { created: this.sort ? -1 : 1 },
 51 |       }))
 52 |     },
 53 | 
 54 |     firstNote () {
 55 |       return this.notes.length && this.notes[0]
 56 |     },
 57 |   },
 58 | 
 59 |   watch: {
 60 |     '$subReady.notes' (value) {
 61 |       console.log(value)
 62 |     },
 63 | 
 64 |     notes (value) {
 65 |       console.log('length', value.length)
 66 |     },
 67 |   },
 68 | 
 69 |   methods: {
 70 |     async addNote () {
 71 |       if (this.newNote) {
 72 |         try {
 73 |           await Meteor.callPromise('notes.add', {
 74 |             text: this.newNote,
 75 |           })
 76 |           this.newNote = ''
 77 |         } catch (e) {
 78 |           console.error(e)
 79 |         }
 80 |       }
 81 |     },
 82 | 
 83 |     async removeNote (note) {
 84 |       try {
 85 |         await Meteor.callPromise('notes.remove', {
 86 |           _id: note._id,
 87 |         })
 88 |       } catch (e) {
 89 |         console.error(e)
 90 |       }
 91 |     },
 92 | 
 93 |     handleVisibility (visible) {
 94 |       if (visible && this.$subReady.notes) {
 95 |         this.limit += 5
 96 |       }
 97 |     },
 98 |   },
 99 | }
100 | </script>
101 | 
102 | <style lang="less" scoped>
103 | .note {
104 |   padding: 32px 0;
105 | 
106 |   &:not(:last-child) {
107 |     border-bottom: solid 1px fade(black, 10%);
108 |   }
109 | 
110 |   .text {
111 |     margin-bottom: 12px;
112 |   }
113 | 
114 |   .date {
115 |     margin-left: 16px;
116 |     color: lighten(black, 70%);
117 |   }
118 | }
119 | 
120 | input {
121 |   display: block;
122 |   width: 100%;
123 | }
124 | 
125 | .actions {
126 |   margin-top: 6px;
127 | }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/imports/ui/Notes.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="notes">
  3 |     <h1>Notes</h1>
  4 |     <div>
  5 |       <router-link :to="{ name: 'notes-components' }">With Meteor components</router-link>
  6 |       <router-link :to="{ name: 'notes-computed' }">With Meteor computed</router-link>
  7 |     </div>
  8 |     <div>
  9 |       <input v-model="newNote" placeholder="Add a note" @keyup.enter="addNote" />
 10 |     </div>
 11 |     <div class="actions">
 12 |       <button @click="sort = !sort">Toggle sort</button>
 13 |     </div>
 14 |     <div>
 15 |       <input v-model="search" placeholder="Search...">
 16 |     </div>
 17 |     <div class="notes">
 18 |       <div v-for="note in notes" class="note" :class="{ many: notes.length > 1 }">
 19 |         <div class="text">{{ note.text }}</div>
 20 |         <div class="actions">
 21 |           <button @click="event => removeNote(note)">Delete note</button>
 22 |           <span class="date">{{ note.created | date }}</span>
 23 |         </div>
 24 |       </div>
 25 |     </div>
 26 |     <div v-if="!$isServer" v-observe-visibility="handleVisibility"></div>
 27 |     <div v-if="!$subReady.notes" class="loading">Loading...</div>
 28 |     <div>First: {{ firstNote }}</div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | import { Meteor } from 'meteor/meteor'
 34 | import { Notes } from '../api/collections'
 35 | 
 36 | export default {
 37 |   data () {
 38 |     return {
 39 |       newNote: '',
 40 |       search: '',
 41 |       sort: true,
 42 |     }
 43 |   },
 44 | 
 45 |   meteor: {
 46 |     $subscribe: {
 47 |       'notes' () {
 48 |         return [this.search]
 49 |       },
 50 |     },
 51 |     notes () {
 52 |       return Notes.find({}, {
 53 |         sort: { created: this.sort ? -1 : 1 },
 54 |       })
 55 |     },
 56 |   },
 57 | 
 58 |   computed: {
 59 |     firstNote () {
 60 |       return this.notes.length && this.notes[0]
 61 |     },
 62 |   },
 63 | 
 64 |   watch: {
 65 |     '$subReady.notes' (value) {
 66 |       console.log('notes sub ready', value)
 67 |     },
 68 | 
 69 |     notes (value) {
 70 |       console.log('length', value.length)
 71 |     },
 72 |   },
 73 | 
 74 |   methods: {
 75 |     async addNote () {
 76 |       if (this.newNote) {
 77 |         try {
 78 |           await Meteor.callPromise('notes.add', {
 79 |             text: this.newNote,
 80 |           })
 81 |           this.newNote = ''
 82 |         } catch (e) {
 83 |           console.error(e)
 84 |         }
 85 |       }
 86 |     },
 87 | 
 88 |     async removeNote (note) {
 89 |       try {
 90 |         await Meteor.callPromise('notes.remove', {
 91 |           _id: note._id,
 92 |         })
 93 |       } catch (e) {
 94 |         console.error(e)
 95 |       }
 96 |     },
 97 | 
 98 |     handleVisibility (visible) {
 99 |       if (visible && this.$subReady.notes) {
100 |         this.limit += 5
101 |       }
102 |     },
103 |   },
104 | }
105 | </script>
106 | 
107 | <style lang="less" scoped>
108 | .note {
109 |   padding: 32px 0;
110 | 
111 |   &:not(:last-child) {
112 |     border-bottom: solid 1px fade(black, 10%);
113 |   }
114 | 
115 |   .text {
116 |     margin-bottom: 12px;
117 |   }
118 | 
119 |   .date {
120 |     margin-left: 16px;
121 |     color: lighten(black, 70%);
122 |   }
123 | }
124 | 
125 | input {
126 |   display: block;
127 |   width: 100%;
128 | }
129 | 
130 | .actions {
131 |   margin-top: 6px;
132 | }
133 | </style>
134 | 


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