Skip to content

Instantly share code, notes, and snippets.

@iCodeForBananas
Created July 7, 2015 21:20
Show Gist options
  • Select an option

  • Save iCodeForBananas/2753ae3f5e4ef061664f to your computer and use it in GitHub Desktop.

Select an option

Save iCodeForBananas/2753ae3f5e4ef061664f to your computer and use it in GitHub Desktop.
vuejs and vue-router working together.
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');
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');
});
{
"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