├── .gitattributes ├── .gitignore ├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── README.md ├── client ├── main.css ├── main.html ├── main.js └── main.routes.js ├── imports ├── routes.js └── ui │ ├── AppLayout.vue │ ├── AppMenu.vue │ ├── Home.vue │ ├── NotFound.vue │ ├── Page1.vue │ ├── Page1A.vue │ ├── Page1B.vue │ └── Page2.vue ├── package.json ├── public └── img │ ├── droids.jpg │ ├── meteor.png │ └── vue.png └── server └── main.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | 18pjpv1176ye7b7qp7k6 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 | meteor-base@1.0.4 # Packages every Meteor app needs to have 8 | mobile-experience@1.0.4 # Packages for a great mobile UX 9 | mongo@1.1.12 # The database Meteor supports right now 10 | reactive-var@1.0.10 # Reactive variable for tracker 11 | jquery@1.11.9 # Helpful client-side library 12 | tracker@1.1.0 # Meteor's client-side reactive programming library 13 | 14 | standard-minifier-css@1.2.0 # CSS minifier run for production mode 15 | standard-minifier-js@1.2.0 # JS minifier run for production mode 16 | es5-shim@4.6.14 # ECMAScript 5 compatibility for older browsers. 17 | ecmascript@0.5.8 # Enable ECMAScript2015+ syntax in app code 18 | 19 | autopublish@1.0.7 # Publish all data to the clients (for prototyping) 20 | insecure@1.0.7 # Allow all DB writes from clients (for prototyping) 21 | static-html@1.1.12 22 | akryum:vue 23 | akryum:vue-component 24 | session@1.1.6 25 | akryum:vue-router2 26 | akryum:vue-stylus 27 | shell-server 28 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.4.1.1 2 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | akryum:npm-check@0.0.3 2 | akryum:vue@1.0.5 3 | akryum:vue-component@0.7.1 4 | akryum:vue-component-dev-client@0.2.0 5 | akryum:vue-component-dev-server@0.0.2 6 | akryum:vue-router2@0.0.1 7 | akryum:vue-stylus@0.0.4 8 | allow-deny@1.0.5 9 | autopublish@1.0.7 10 | autoupdate@1.3.11 11 | babel-compiler@6.9.1 12 | babel-runtime@0.1.11 13 | base64@1.0.9 14 | binary-heap@1.0.9 15 | blaze@2.1.9 16 | blaze-tools@1.0.10 17 | boilerplate-generator@1.0.10 18 | caching-compiler@1.1.7 19 | caching-html-compiler@1.0.7 20 | callback-hook@1.0.9 21 | check@1.2.3 22 | ddp@1.2.5 23 | ddp-client@1.3.1 24 | ddp-common@1.2.6 25 | ddp-server@1.3.10 26 | deps@1.0.12 27 | diff-sequence@1.0.6 28 | ecmascript@0.5.8 29 | ecmascript-runtime@0.3.14 30 | ejson@1.0.12 31 | es5-shim@4.6.14 32 | fastclick@1.0.12 33 | geojson-utils@1.0.9 34 | hot-code-push@1.0.4 35 | html-tools@1.0.11 36 | htmljs@1.0.11 37 | http@1.2.9 38 | id-map@1.0.8 39 | insecure@1.0.7 40 | jquery@1.11.9 41 | launch-screen@1.0.12 42 | livedata@1.0.18 43 | logging@1.1.15 44 | meteor@1.2.17 45 | meteor-base@1.0.4 46 | minifier-css@1.2.14 47 | minifier-js@1.2.14 48 | minimongo@1.0.17 49 | mobile-experience@1.0.4 50 | mobile-status-bar@1.0.12 51 | modules@0.7.6 52 | modules-runtime@0.7.6 53 | mongo@1.1.12 54 | mongo-id@1.0.5 55 | npm-mongo@1.5.49 56 | observe-sequence@1.0.12 57 | ordered-dict@1.0.8 58 | promise@0.8.7 59 | random@1.0.10 60 | reactive-dict@1.1.8 61 | reactive-var@1.0.10 62 | reload@1.1.10 63 | retry@1.0.8 64 | routepolicy@1.0.11 65 | session@1.1.6 66 | shell-server@0.2.1 67 | spacebars@1.0.13 68 | spacebars-compiler@1.0.13 69 | standard-minifier-css@1.2.1 70 | standard-minifier-js@1.2.0 71 | static-html@1.1.13 72 | templating-tools@1.0.5 73 | tracker@1.1.0 74 | ui@1.0.12 75 | underscore@1.0.9 76 | url@1.0.10 77 | webapp@1.3.11 78 | webapp-hashing@1.0.9 79 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Meteor app with vue 2.x and routing 2 | 3 | A simple meteor project featuring [vue](https://vuejs.org/) as ui layer and routing with vue-router ([more info](https://github.com/Akryum/meteor-vue-component)). 4 | 5 | ## Steps to reproduce 6 | 7 | Follow the steps in [this example](https://github.com/Akryum/meteor-vue-example). 8 | 9 | Add the `akryum:vue-router2` package: 10 | 11 | meteor add akryum:vue-router2 12 | 13 | Add routes using [this guide](https://github.com/Akryum/meteor-vue-component/tree/master/packages/vue-router2#usage). 14 | -------------------------------------------------------------------------------- /client/main.css: -------------------------------------------------------------------------------- 1 | body, input { 2 | font-family: sans-serif; 3 | font-size: 12pt; 4 | } 5 | 6 | body { 7 | max-width: 400px; 8 | margin: auto; 9 | padding: 24px; 10 | } 11 | 12 | a { 13 | color: #40b883; 14 | cursor: pointer; 15 | text-decoration: none; 16 | } 17 | 18 | a:hover { 19 | color: #a0ddc4; 20 | } 21 | 22 | h1, h2 { 23 | margin: 0; 24 | text-align: center; 25 | } 26 | 27 | h1 { 28 | color: #40b883; 29 | font-weight: lighter; 30 | } 31 | 32 | h2 { 33 | color: #999; 34 | font-weight: lighter; 35 | } 36 | 37 | input { 38 | padding: 6px 12px; 39 | border: solid 1px #ccc; 40 | border-radius: 3px; 41 | display: block; 42 | width: 100%; 43 | box-sizing: border-box; 44 | } 45 | 46 | form { 47 | margin: 12px 0; 48 | } 49 | 50 | hr { 51 | border: none; 52 | height: 1px; 53 | background: #40b883; 54 | } 55 | 56 | .thread .actions { 57 | padding: 0 12px; 58 | } 59 | 60 | .post .action { 61 | float: right; 62 | } 63 | -------------------------------------------------------------------------------- /client/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Meteor Vue 2.x App 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /client/main.js: -------------------------------------------------------------------------------- 1 | // Libs 2 | import {Meteor} from 'meteor/meteor'; 3 | import Vue from 'vue'; 4 | import routerFactory from '/imports/routes'; 5 | 6 | // App layout 7 | import AppLayout from '/imports/ui/AppLayout.vue'; 8 | 9 | // App start 10 | Meteor.startup(() => { 11 | // Start the router 12 | const router = routerFactory.create(); 13 | new Vue({ 14 | router, 15 | render: h => h(AppLayout), 16 | }).$mount('app'); 17 | }); 18 | -------------------------------------------------------------------------------- /client/main.routes.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | path: '/', 4 | name: 'home', 5 | component: '/imports/ui/Home.vue', 6 | }, 7 | { 8 | path: '/page1', 9 | name: 'page1', 10 | component: '/imports/ui/Page1.vue', 11 | // Nested routes 12 | children: [ 13 | { 14 | path: 'a', 15 | name: 'page1a', 16 | component: '/imports/ui/Page1A.vue', 17 | }, 18 | { 19 | path: 'b', 20 | name: 'page1b', 21 | component: '/imports/ui/Page1B.vue', 22 | }, 23 | ], 24 | }, 25 | { 26 | path: '/page2', 27 | name: 'page2', 28 | component: '/imports/ui/Page2.vue', 29 | }, 30 | ]; 31 | -------------------------------------------------------------------------------- /imports/routes.js: -------------------------------------------------------------------------------- 1 | // Import the router 2 | import { RouterFactory, nativeScrollBehavior } from 'meteor/akryum:vue-router2' 3 | 4 | // Create router instance 5 | const routerFactory = new RouterFactory({ 6 | mode: 'history', 7 | scrollBehavior: nativeScrollBehavior 8 | }); 9 | 10 | // Not found 11 | import NotFound from '/imports/ui/NotFound.vue'; 12 | 13 | RouterFactory.configure(router => { 14 | router.addRoute({ 15 | path: '*', 16 | component: NotFound, 17 | }); 18 | }, -1); 19 | 20 | export default routerFactory; 21 | -------------------------------------------------------------------------------- /imports/ui/AppLayout.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | -------------------------------------------------------------------------------- /imports/ui/AppMenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | -------------------------------------------------------------------------------- /imports/ui/Home.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /imports/ui/NotFound.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /imports/ui/Page1.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | -------------------------------------------------------------------------------- /imports/ui/Page1A.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /imports/ui/Page1B.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /imports/ui/Page2.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "meteor-vue-example-routing", 3 | "private": true, 4 | "scripts": { 5 | "start": "meteor run" 6 | }, 7 | "dependencies": { 8 | "meteor-node-stubs": "~0.2.0" 9 | }, 10 | "devDependencies": { 11 | "vue": "^2.0.0-rc.8", 12 | "vue-router": "^2.0.0-rc.5" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /public/img/droids.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Akryum/meteor-vue2-example-routing/e9fc413ee575d91e522c7e34f80cb45fb57b077e/public/img/droids.jpg -------------------------------------------------------------------------------- /public/img/meteor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Akryum/meteor-vue2-example-routing/e9fc413ee575d91e522c7e34f80cb45fb57b077e/public/img/meteor.png -------------------------------------------------------------------------------- /public/img/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Akryum/meteor-vue2-example-routing/e9fc413ee575d91e522c7e34f80cb45fb57b077e/public/img/vue.png -------------------------------------------------------------------------------- /server/main.js: -------------------------------------------------------------------------------- 1 | import { Meteor } from 'meteor/meteor'; 2 | 3 | Meteor.startup(() => { 4 | // code to run on server at startup 5 | }); 6 | --------------------------------------------------------------------------------