├── README.md
├── docs
    ├── babel
    │   └── index.babel
    ├── css
    │   └── style.css
    ├── index.html
    ├── js
    │   ├── index.js
    │   ├── named.vue
    │   ├── sidebar.vue
    │   ├── user-list.vue
    │   └── user.vue
    └── scss
    │   └── style.scss
└── license.txt


/README.md:
--------------------------------------------------------------------------------
1 | # vue-without-webpack


--------------------------------------------------------------------------------
/docs/babel/index.babel:
--------------------------------------------------------------------------------
  1 | const User = { 
  2 |   props: {
  3 |     userId: {
  4 |       type: Number,
  5 |       required: true
  6 |     },
  7 |     userData: {
  8 |       type: Object,
  9 |       required: false // User can accept a userData object on params, or not. It's totally optional.
 10 |     }
 11 |   }, 
 12 |   template: `
 13 |     <div>
 14 |       <h3>User ({{userId}})</h3>
 15 |       <div v-if="userData">
 16 |         <p>This route makes use of some option data that was passed in:</p>
 17 |         <p>{{userData.name}}({{userData.age}} yrs old)</p>
 18 |       </div>
 19 |     </div>
 20 |   `, 
 21 |   methods: {
 22 |   }
 23 | }
 24 | 
 25 | const UserList = {
 26 |   data() {
 27 |     return {
 28 |       selectedUser: {} // selected user data. Place this here to make sure it's reactive.
 29 |     }
 30 |   },
 31 |   template: `
 32 |     <div class="userList">
 33 |       <div class="left">
 34 |         <h2>User List</h2>
 35 |         <p>Click a user below and we'll use the User component now as a child component to display the data:</p>
 36 |         <ul>
 37 |           <li class="userLink" @click="loadUserData(123)">User 123</li>
 38 |           <li class="userLink" @click="loadUserData(456)">User 456</li>
 39 |         </ul>
 40 |       </div>
 41 |       <div class="right" v-if="selectedUser.userId">
 42 | 
 43 |         <!-- User is here all the time, and we just display it when we need to. 
 44 |               We give it the data it needs as a prop. -->
 45 |         <User :userId="selectedUser.userId" :userData="selectedUser.userData">
 46 |       </div>
 47 |     </div>
 48 |   `,
 49 |   methods: {
 50 |     loadUserData(id) {
 51 |       // this could be some ajax call to get user data from an API, but we'll just set some dummy data:
 52 |       this.selectedUser = id === 123
 53 |                 ? { userId: 123 }
 54 |                 : { userId: 456, userData: {age: 37, name: 'Patrick'}}
 55 |     }
 56 |   },
 57 |   /* 
 58 |     On the UserList component we use the User component as a child component 
 59 |     and pass data down via props.
 60 |   */
 61 |   components: {
 62 |     User
 63 |   }
 64 | }
 65 | 
 66 | const Sidebar = {
 67 |   template: `<div>This is the sidebar. No props here.</div>`
 68 | }
 69 | 
 70 | const NamedWrapper = {
 71 |   template: `
 72 |     <div>
 73 |       <h2>Users loaded into named views:</h2>
 74 |       <ul>
 75 |         <li><router-link :to="{ name: 'named_id', params: { userId: 123 } }">User 123</router-link></li>
 76 |         <li><router-link :to="{ name: 'named_id', params: { userId: 456, userData: { age: 37, name: 'Patrick'} } }">User 456</router-link></li>
 77 |       </ul>
 78 |       <div class="userList">
 79 |         <router-view class="left" name="user_details"></router-view>
 80 |         <router-view class="right" name="sidebar"></router-view>
 81 |       </div>
 82 |     </div>
 83 |   `, 
 84 | }
 85 | 
 86 | 
 87 | 
 88 | 
 89 | /* Router and App setup: */
 90 | const routes = [
 91 |   {
 92 |     path: '/user',
 93 |     name: 'userList',
 94 |     component: UserList
 95 |   },
 96 |   
 97 |   // use /named as the parent route to wrap our two named views:
 98 |   {
 99 |     path: '/named',
100 |     name: 'named',
101 |     component: NamedWrapper,
102 |     children: [
103 |       {
104 |         path: '/user/:userId',
105 |         name: 'named_id',
106 |         components: { user_details: User, sidebar: Sidebar },
107 |         props: { user_details: true, sidebar: false }
108 |       }
109 |     ]
110 |   },
111 |   {
112 |     path: '/user/:userId',
113 |     name: 'user',
114 |     component: User,
115 |     props: true,
116 |   }
117 | ]
118 | 
119 | const router = new VueRouter({
120 |   routes
121 | })
122 | 
123 | const app = new Vue({
124 |   router
125 | }).$mount('#app')


--------------------------------------------------------------------------------
/docs/css/style.css:
--------------------------------------------------------------------------------
 1 | #app {
 2 |   max-width: 800px;
 3 |   margin: auto;
 4 | }
 5 | 
 6 | nav.mainNav > * {
 7 |   padding: 0 0.75rem;
 8 |   text-decoration: none;
 9 | }
10 | nav.mainNav > *:nth-last-child(n+2) {
11 |   border-right: 1px solid #aaa;
12 | }
13 | 
14 | .mainBody {
15 |   border-top: 1px solid #ddd;
16 |   border-bottom: 1px solid #ddd;
17 |   margin: 1rem 0;
18 |   padding: 1rem 2rem;
19 |   min-height: 55px;
20 | }
21 | 
22 | .userList {
23 |   display: -webkit-box;
24 |   display: -ms-flexbox;
25 |   display: flex;
26 |   -webkit-box-align: start;
27 |       -ms-flex-align: start;
28 |           align-items: flex-start;
29 | }
30 | .userList > * {
31 |   -webkit-box-flex: 1;
32 |       -ms-flex: 1;
33 |           flex: 1;
34 |   max-width: 50%;
35 |   padding: 0 1rem;
36 | }
37 | 
38 | .userLink:hover {
39 |   cursor: pointer;
40 | }
41 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Vue Router Pass Params As Props</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 8 | 
 9 | 
10 |   <link rel="stylesheet" href="css/style.css">
11 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js'></script>
12 |   <script src="https://unpkg.com/http-vue-loader"></script>
13 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.min.js'></script>
14 | 
15 | </head>
16 | 
17 | <body>
18 |   <div id="app">
19 |     <h1>Passing Route Parameters to Component Props</h1>
20 | 
21 |     <p>Using the User component on a route change:</p>
22 |     <nav class="mainNav">
23 |       <!-- use router-link component for navigation. -->
24 |       <!-- specify the link by passing an object to the `to` prop. -->
25 |       <router-link :to="{ name: 'userList'}">User List</router-link>
26 |       <router-link :to="{ name: 'user', params: { userId: 123 } }">User 123</router-link>
27 |       <router-link :to="{ name: 'user', params: { userId: 456, userData: { age: 39, name: 'Patrick'} } }">User 456</router-link>
28 |       <router-link :to="{ name: 'named'}">Named Views Demo</router-link>
29 |     </nav>
30 | 
31 |     <section class="mainBody">
32 |       <router-view></router-view>
33 |     </section>
34 |   </div>
35 | 
36 |   <script  src="js/index.js"></script>
37 | 
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/docs/js/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var User = httpVueLoader('./js/user.vue')
 3 | var Sidebar = httpVueLoader('./js/sidebar.vue')
 4 | var UserList = httpVueLoader('./js/user-list.vue')
 5 | var NamedWrapper = httpVueLoader('./js/named.vue')
 6 | 
 7 | 
 8 | 
 9 | /* Router and App setup: */
10 | var routes = [{
11 |   path: '/users',
12 |   name: 'userList',
13 |   component: UserList
14 | },
15 | {
16 |   path: '/named',
17 |   name: 'named',
18 |   component: NamedWrapper,
19 |   children: [{
20 |     path: 'user/:userId',
21 |     name: 'named_id',
22 |     components: { user_details: User, sidebar: Sidebar },
23 |     props: { user_details: true, sidebar: false }
24 |   }]
25 | },
26 | {
27 |   path: '/user/:userId',
28 |   name: 'user',
29 |   component: User,
30 |   props: true
31 | }];
32 | 
33 | var router = new VueRouter({
34 |   routes: routes
35 | });
36 | 
37 | var app = new Vue({
38 |   router: router
39 | }).$mount('#app');
40 | 


--------------------------------------------------------------------------------
/docs/js/named.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Users loaded into named views:</h2>
 4 |     <ul>
 5 |       <li>
 6 |         <router-link :to="{ name: 'named_id', params: { userId: 123 } }">User 123</router-link>
 7 |       </li>
 8 |       <li>
 9 |         <router-link :to="{ name: 'named_id', params: { userId: 456, userData: { age: 37, name: 'Patrick'} } }">User 456</router-link>
10 |       </li>
11 |       </ul>
12 |       <div class="userList">
13 |         <router-view class="left" name="user_details"></router-view>
14 |         <router-view class="right" name="sidebar"></router-view>
15 |       </div>
16 |     </div>
17 |   </template>
18 | 
19 |   <script>
20 |   module.exports = {
21 |     name: "named",
22 |     methods: {}
23 |   }
24 |   </script>
25 | 
26 |   <style>
27 |   .hello {
28 |     background-color: #ffe;
29 |   }
30 |   </style>
31 | 
32 | 


--------------------------------------------------------------------------------
/docs/js/sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>Burası Sidebar.</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | module.exports = {
 7 |   methods: {}
 8 | }
 9 | </script>
10 | 
11 | <style>
12 | .hello {
13 |     background-color: #ffe;
14 | }
15 | </style>
16 | 
17 | 


--------------------------------------------------------------------------------
/docs/js/user-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="userList">
 3 |       <div class="left">
 4 |         <h2>User List</h2>
 5 |         <p>Buraya Tıkla: {{selectedUser}} </p>
 6 |         <ul>
 7 |           <li class="userLink" @click="loadUserData(123)">User 123</li>
 8 |           <li class="userLink" @click="loadUserData(456)">User 456</li>
 9 |         </ul>
10 |       </div>
11 |       <div class="right" v-if="selectedUser.userId">
12 |         <user :user-id="selectedUser.userId" :user-data="selectedUser.userData"></user>
13 |       </div>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 | var User = httpVueLoader('./user.vue')
19 | module.exports = {
20 |   data: function data() {
21 |     return {
22 |       selectedUser: {} // selected user data. Place this here to make sure it's reactive.
23 |     };
24 |   },
25 |   methods: {
26 |     loadUserData: function loadUserData(id) {
27 |       this.selectedUser = id === 123 ? { userId: 123 } : { userId: 456, userData: { age: 38, name: 'Patrick' } };
28 |     }
29 |   },
30 | 
31 |     components: {
32 |       user: User
33 |     }
34 |   }
35 |   </script>
36 | 
37 |   <style>
38 |   .hello {
39 |     background-color: #ffe;
40 |   }
41 |   </style>
42 | 
43 | 


--------------------------------------------------------------------------------
/docs/js/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |       <div>
 3 |       <h3>User klasör user.vue ({{userId}})</h3>
 4 |       <div v-if="userData">
 5 |         <p>This route makes use of some option data that was passed in:</p>
 6 |         <p>{{userData.name}}({{userData.age}} yrs old)</p>
 7 |       </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | module.exports = {
13 |   name: "user",
14 |   props: ['userId', 'userData'],
15 |   methods: {}
16 | }
17 | </script>
18 | 
19 | <style>
20 | .hello {
21 |     background-color: #ffe;
22 | }
23 | </style>
24 | 
25 | 


--------------------------------------------------------------------------------
/docs/scss/style.scss:
--------------------------------------------------------------------------------
 1 | #app {
 2 |   max-width: 800px;
 3 |   margin: auto;
 4 | }
 5 | 
 6 | nav.mainNav {
 7 |   > * {
 8 |     padding: 0 0.75rem;
 9 |     text-decoration: none;
10 |   }
11 |   
12 |   > *:nth-last-child(n+2) {
13 |     border-right: 1px solid #aaa;
14 |   }
15 | }
16 | 
17 | .mainBody {
18 |   border-top: 1px solid #ddd;
19 |   border-bottom: 1px solid #ddd;
20 |   margin: 1rem 0;
21 |   padding: 1rem 2rem;
22 |   min-height: 55px;
23 | }
24 | 
25 | .userList {
26 |   display: flex;
27 |   align-items: flex-start;
28 |   
29 |   > * {
30 |     flex: 1;
31 |     max-width: 50%;
32 |     padding: 0 1rem;
33 |   }
34 | }
35 | 
36 | .userLink {
37 |   &:hover {
38 |     cursor: pointer;
39 |   }
40 | }


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <!--
 4 | Copyright (c) 2017 by Gokhan (https://codepen.io/liberyen/pen/wrgPNY)
 5 | 
 6 | 
 7 | Fork of an original work by Patrick O'Dacre (https://codepen.io/patrickodacre/pen/zxwWPO)
 8 | 
 9 | 
10 | 
11 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
16 | -->
17 | 


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