Created
July 7, 2015 21:20
-
-
Save iCodeForBananas/2753ae3f5e4ef061664f to your computer and use it in GitHub Desktop.
vuejs and vue-router working together.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Vue = require('vue'); | |
| var Router = require('vue-router'); | |
| Vue.use(Router); | |
| var App = Vue.extend({ | |
| template: '<h1>App</h1>{{ test }}<a v-link="/dashboard">Dashboard</a><a v-link="/daily-summary">Daily Summary</a><a v-link="/chat">Chat</a><a v-link="/secure-notes">Secure Notes</a>' + | |
| '<router-view></router-view>', // <-- outlet | |
| data: function() { | |
| return { | |
| test: 'I am a test vaar' | |
| }; | |
| }, | |
| components: { | |
| 'dashboard': { | |
| template: '<h2>Dashboard</h2>' + | |
| '<router-view></router-view>', // <-- nested outlet | |
| }, | |
| 'daily-summary': { | |
| template: | |
| '<h2>Daily Summary</h2>' + | |
| '<router-view></router-view>', // <-- nested outlet | |
| }, | |
| 'chat': { | |
| template: | |
| '<h2>Chat</h2>' + | |
| '<router-view></router-view>', // <-- nested outlet | |
| }, | |
| 'secure-notes': { | |
| template: | |
| '<h2>Secure Notes</h2>' + | |
| '<router-view></router-view>', // <-- nested outlet | |
| } | |
| } | |
| }); | |
| var router = new Router(); | |
| router.map({ | |
| '/dashboard': { | |
| component: 'dashboard' | |
| }, | |
| '/daily-summary': { | |
| component: 'daily-summary' | |
| }, | |
| '/chat': { | |
| component: 'chat' | |
| }, | |
| 'secure-notes': { | |
| component: 'secure-notes' | |
| } | |
| }); | |
| router.start(App, '#app'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var elixir = require('laravel-elixir'); | |
| /* | |
| |-------------------------------------------------------------------------- | |
| | Elixir Asset Management | |
| |-------------------------------------------------------------------------- | |
| | | |
| | Elixir provides a clean, fluent API for defining some basic Gulp tasks | |
| | for your Laravel application. By default, we are compiling the Sass | |
| | file for our application, as well as publishing vendor resources. | |
| | | |
| */ | |
| elixir(function(mix) { | |
| mix.sass('app.scss'); | |
| mix.browserify('app.js'); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "memememememe", | |
| "version": "1.0.0", | |
| "devDependencies": { | |
| "gulp": "^3.8.8" | |
| }, | |
| "dependencies": { | |
| "laravel-elixir": "*", | |
| "vue": "^0.12.6", | |
| "vue-router": "vuejs/vue-router" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment