├── .gitignore ├── LICENSE ├── README.md ├── app ├── api.js ├── app.vue ├── components │ └── index.js ├── index.js ├── router │ ├── app-controller.js │ └── index.js └── store │ ├── auth │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js │ └── index.js ├── assets └── scss │ └── app.scss ├── gulpfile.js ├── package.json ├── public ├── css │ ├── app.css │ └── app.css.map ├── favicon.ico ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── index.html └── js │ └── app.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2016 Cody Mercer 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-feathers-client 2 | 3 | Boilerplate for Vue 2.0 projects backed by FeathersJS. 4 | 5 | ## Setup 6 | ``` 7 | $ git clone https://github.com:/cklmercer/vue-feathers-client 8 | ``` 9 | ``` 10 | $ cd vue-feathers-client 11 | ``` 12 | ``` 13 | $ yarn install 14 | ``` 15 | 16 | ## Routing 17 | This boilerplate project uses the official VueJS router, [vue-router](https://github.com/vuejs/vue-router). 18 | Out of the box you'll find you're already setup to build blazing fast SPAs. 19 | 20 | To get started, checkout the `./app/router` directory. 21 | 22 | ## Store 23 | This boilerplate project uses the official VueJS store library, [vuex](https://github.com/vuejs/vuex). 24 | `Vuex` makes managing your complex application's state a cinch. `Vuex` also support "time-travel" debugging. 25 | 26 | To get started, checkout the `./app/store` directory. 27 | 28 | ## Events 29 | This project uses [vue-events](https://github.com/cklmercer/vue-events) to 30 | provide a global event bus. This makes publishing and subscribing to event a breeze. 31 | 32 | To learn more about `vue-events`, check it out on [github](https://github.com/cklmercer/vue-events) 33 | 34 | ## Feathers 35 | This project uses [vue-feathers-services](https://github.com/cklmercer/vue-feathers-services) 36 | to interact with your [FeathersJS](https://github.com/feathersjs/feathers) API. 37 | 38 | To learn more about `vue-feathers-services`, check it out on [github](https://github.com/cklmercer/vue-feathers-services). 39 | 40 | ## Build Process 41 | To build your project run the gulp command. If you haven't already installed gulp, 42 | do so globally with the following command. _(You might need to use `sudo` to install globally.)_ 43 | 44 | ``` 45 | $ npm install -g gulp 46 | ``` 47 | 48 | Once you have gulp installed, you can build your project with the `gulp` command. 49 | 50 | ``` 51 | $ gulp 52 | ``` 53 | 54 | If you'd like for gulp to monitor your project for changes and run automatically, 55 | you can use the `gulp watch` command. 56 | 57 | ``` 58 | $ gulp watch 59 | ``` 60 | 61 | This project uses [laravel-elixir](https://laravel.com/docs/5.3/elixir) to build 62 | and compile assets. I know this may seem odd at first, but give it a chance and 63 | I'm sure you'll love it just as much as I do. 64 | 65 | *Disclaimer: Even though `laravel-elixir` is part of the official Laravel namespace, 66 | it doesn't actually have any dependencies on the Laravel core or any PHP files. 67 | It, in fact, works fine by itself and removes the need for huge configuration files.* 68 | 69 | ## License 70 | [MIT](https://opensource.org/licenses/MIT) 71 | -------------------------------------------------------------------------------- /app/api.js: -------------------------------------------------------------------------------- 1 | import feathers from 'feathers-client' 2 | import socketio from 'feathers-socketio/client' 3 | 4 | const io = require('socket.io-client') 5 | const socket = io('http://localhost:3030') 6 | 7 | const api = feathers() 8 | .configure(feathers.hooks()) 9 | .configure(socketio(socket)) 10 | .configure(feathers.authentication({ storage: window.localStorage })) 11 | 12 | export default api 13 | -------------------------------------------------------------------------------- /app/app.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /app/components/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cklmercer/vue-feathers-client/dfd0915b5557b719275da17006e963b8f1d8becc/app/components/index.js -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | import api from './api' 2 | import app from './app.vue' 3 | import router from './router' 4 | import store from './store' 5 | import Vue from 'vue' 6 | import VueEvents from 'vue-events' 7 | import VueFeathers from 'vue-feathers-services' 8 | import VueRouter from 'vue-router' 9 | import Vuex from 'vuex' 10 | import { sync } from 'vuex-router-sync' 11 | 12 | // Install VueJS plugins. 13 | Vue.use(Vuex) 14 | Vue.use(VueEvents) 15 | Vue.use(VueRouter) 16 | Vue.use(VueFeathers, api) 17 | 18 | // Create store & router. 19 | const Store = new Vuex.Store(store) 20 | const Router = new VueRouter(router) 21 | 22 | // Sync store & router. 23 | sync(Store, Router) 24 | 25 | // Install global components. 26 | require('./components') 27 | 28 | // Create root Vue instance. 29 | new Vue({ 30 | el: '#app', 31 | render: h => h(app), 32 | router: Router, 33 | store: Store 34 | }) 35 | -------------------------------------------------------------------------------- /app/router/app-controller.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | // 3 | ] 4 | -------------------------------------------------------------------------------- /app/router/index.js: -------------------------------------------------------------------------------- 1 | // Import controllers. 2 | import AppController from './app-controller' 3 | 4 | // Export application router. 5 | export default { 6 | mode: 'history', 7 | routes: [ 8 | ...AppController 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /app/store/auth/actions.js: -------------------------------------------------------------------------------- 1 | import { mutations } from './mutations' 2 | 3 | export default { 4 | // Login 5 | login({commit}, auth) { 6 | commit(mutations.LOGIN, auth) 7 | }, 8 | 9 | // Logout 10 | logout({commit}) { 11 | commit(mutations.LOGOUT) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /app/store/auth/getters.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | 3 | export default { 4 | 'auth.token': state => state.token, 5 | 'auth.user': state => state.user 6 | } 7 | -------------------------------------------------------------------------------- /app/store/auth/index.js: -------------------------------------------------------------------------------- 1 | import actions from './actions' 2 | import getters from './getters' 3 | import mutations from './mutations' 4 | import state from './state' 5 | 6 | export default { actions, getters, mutations, state } 7 | -------------------------------------------------------------------------------- /app/store/auth/mutations.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | 3 | export const mutations = { 4 | LOGIN: 'auth/LOGIN', 5 | LOGOUT: 'auth/LOGOUT' 6 | } 7 | 8 | export default { 9 | // Login 10 | [mutations.LOGIN](state, { token, user }) { 11 | state.token = token 12 | state.user = user 13 | }, 14 | 15 | // Logout 16 | [mutations.LOGOUT](state) { 17 | state.token = null 18 | state.user = null 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/store/auth/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | user: null, 3 | token: null 4 | } 5 | -------------------------------------------------------------------------------- /app/store/index.js: -------------------------------------------------------------------------------- 1 | import auth from './auth' 2 | 3 | export default { 4 | modules: { 5 | auth 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/app.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var elixir = require('laravel-elixir') 2 | require('laravel-elixir-vue-2') 3 | 4 | elixir(function (mix) { 5 | mix.copy('./assets/images/**', './public/images') 6 | mix.sass('./assets/scss/app.scss', './public/css/app.css') 7 | mix.webpack('./app/index.js', './public/js/app.js') 8 | }) 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "gulp": "^3.9.1", 4 | "laravel-elixir": "^6.0.0-15", 5 | "laravel-elixir-browsersync-official": "^1.0.0", 6 | "laravel-elixir-vue-2": "^0.3.0", 7 | "laravel-elixir-webpack-official": "^1.0.10" 8 | }, 9 | "dependencies": { 10 | "feathers-client": "^1.8.0", 11 | "socket.io-client": "^1.7.1", 12 | "vue": "^2.1.4", 13 | "vue-events": "v2.0.0-beta", 14 | "vue-feathers-services": "^0.1.0", 15 | "vue-router": "^2.1.1", 16 | "vuex": "^2.0.0", 17 | "vuex-router-sync": "^3.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /public/css/app.css: -------------------------------------------------------------------------------- 1 | 2 | /*# sourceMappingURL=app.css.map */ 3 | -------------------------------------------------------------------------------- /public/css/app.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["app.css"],"names":[],"mappings":"AAAA","file":"app.css","sourcesContent":[]} -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cklmercer/vue-feathers-client/dfd0915b5557b719275da17006e963b8f1d8becc/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cklmercer/vue-feathers-client/dfd0915b5557b719275da17006e963b8f1d8becc/public/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cklmercer/vue-feathers-client/dfd0915b5557b719275da17006e963b8f1d8becc/public/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cklmercer/vue-feathers-client/dfd0915b5557b719275da17006e963b8f1d8becc/public/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cklmercer/vue-feathers-client/dfd0915b5557b719275da17006e963b8f1d8becc/public/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /public/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cklmercer/vue-feathers-client/dfd0915b5557b719275da17006e963b8f1d8becc/public/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Feathers Client 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | --------------------------------------------------------------------------------