├── .browserslistrc ├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── _redirects ├── favicon-dark.png ├── favicon-light.png ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── add.svg │ ├── comment.svg │ ├── delete.svg │ ├── error-dark.jpg │ ├── error-light.png │ ├── favicon-dark.png │ ├── favicon-light.png │ ├── fork.svg │ ├── gitstalk-dark.svg │ ├── gitstalk.svg │ ├── logo.png │ ├── moon-dark.svg │ ├── moon-light.svg │ └── star.svg ├── components │ ├── Foot.vue │ ├── Home.vue │ └── Profile.vue ├── css │ ├── base-footer.scss │ ├── base-home.scss │ ├── base-profile.scss │ └── themes │ │ ├── dark.scss │ │ └── light.scss ├── main.js ├── router │ └── index.js └── views │ ├── About.vue │ └── Home.vue └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | ko_fi: thelittlewonder 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Abhishek Sharma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Gitstalk](https://i.imgur.com/4TLcgCS.png) 2 | 3 | ### Discover who's upto what on Github 4 | Check it out at https://gitstalk.netlify.app/ 5 | 6 | Gitstalk - Discover what your favorite GitHub users are up to | Product Hunt Embed 7 | 8 | ## Local Setup 9 | 10 | ``` bash 11 | # install dependencies 12 | yarn install 13 | 14 | # serve locally 15 | yarn serve 16 | ``` 17 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gitstalk2021", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "axios": "^0.21.1", 11 | "core-js": "^3.6.5", 12 | "reset-css": "^5.0.1", 13 | "vue": "^2.6.11", 14 | "vue-router": "^3.2.0" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "~4.5.0", 18 | "@vue/cli-plugin-router": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "node-sass": "^4.12.0", 21 | "sass-loader": "^8.0.2", 22 | "vue-template-compiler": "^2.6.11" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/public/favicon-dark.png -------------------------------------------------------------------------------- /public/favicon-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/public/favicon-light.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | Gitstalk 41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 97 | 98 | -------------------------------------------------------------------------------- /src/assets/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/error-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/src/assets/error-dark.jpg -------------------------------------------------------------------------------- /src/assets/error-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/src/assets/error-light.png -------------------------------------------------------------------------------- /src/assets/favicon-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/src/assets/favicon-dark.png -------------------------------------------------------------------------------- /src/assets/favicon-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/src/assets/favicon-light.png -------------------------------------------------------------------------------- /src/assets/fork.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/gitstalk-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/gitstalk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/moon-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/moon-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/Foot.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | 42 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 65 | 66 | -------------------------------------------------------------------------------- /src/components/Profile.vue: -------------------------------------------------------------------------------- 1 | 101 | 102 | 501 | 502 | -------------------------------------------------------------------------------- /src/css/base-footer.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thelittlewonder/gitstalk/2ff5fd5ef96d2b3605b1bfae30b4e376545a6f9c/src/css/base-footer.scss -------------------------------------------------------------------------------- /src/css/base-home.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-input-placeholder { 2 | color: $placeholder; 3 | font-family: "Rubik"; 4 | } 5 | 6 | .home { 7 | max-width: 960px; 8 | text-align: center; 9 | margin: auto; 10 | position: absolute; 11 | top: 40%; 12 | left: 50%; 13 | margin-right: -50%; 14 | transform: translate(-50%, -50%); 15 | } 16 | 17 | .search { 18 | min-height: calc(100vh - 100px); 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | .brandlogo { 24 | margin-bottom: 0.75em; 25 | height: 40px; 26 | width: 250px; 27 | background: url($logo) no-repeat; 28 | display: block; 29 | box-sizing: border-box; 30 | border: none; 31 | outline: none; 32 | } 33 | 34 | h3 { 35 | margin-bottom: 4em; 36 | color: $text1; 37 | font-size: 0.75em; 38 | } 39 | 40 | .biatch { 41 | display: flex; 42 | flex-direction: row; 43 | align-items: center; 44 | 45 | div { 46 | color: $text1; 47 | } 48 | 49 | input { 50 | margin-left: 0.25em; 51 | color: $text1; 52 | } 53 | 54 | button { 55 | padding: 0.6em 2em 0.5em 2em; 56 | cursor: pointer; 57 | background-color: $main; 58 | font-size: 1em; 59 | border-radius: 0 2px 2px 0; 60 | color: #fff; 61 | font-family: "Rubik"; 62 | border: none; 63 | letter-spacing: 0.01em; 64 | } 65 | } 66 | 67 | input { 68 | min-width: 350px; 69 | display: block; 70 | background: $bg-main; 71 | border: 1px solid $input-border; 72 | box-sizing: border-box; 73 | font-size: 1em; 74 | padding: 0.5em 0.75em; 75 | border-radius: 2px 0 0 2px; 76 | transition-property: all; 77 | transition-duration: 0.3s; 78 | transition-timing-function: ease-in-out; 79 | 80 | &:focus { 81 | outline: none; 82 | border: 1px solid $main; 83 | } 84 | } 85 | 86 | .secondary { 87 | margin-top: 1em; 88 | background: transparent; 89 | padding: 0.5em; 90 | cursor: pointer; 91 | font-size: 0.75em; 92 | border-radius: 2px; 93 | font-family: "Rubik"; 94 | border: none; 95 | letter-spacing: 0.01em; 96 | 97 | &:focus { 98 | outline: none; 99 | } 100 | } 101 | } 102 | 103 | @media screen and (max-width: 767px) { 104 | .biatch { 105 | flex-direction: column !important; 106 | 107 | div { 108 | display: none; 109 | } 110 | 111 | input { 112 | min-width: 320px !important; 113 | } 114 | 115 | button { 116 | border-radius: 2px; 117 | margin-top: 0.5em; 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/css/base-profile.scss: -------------------------------------------------------------------------------- 1 | header { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-between; 5 | align-items: center; 6 | margin-bottom: 1em; 7 | 8 | .darkmode { 9 | margin-left: 12px; 10 | width: 22px; 11 | height: 22px; 12 | border-radius: 100px; 13 | background: url($moon) no-repeat $toggle-bg; 14 | background-size: 14px 14px; 15 | background-position: center; 16 | cursor: pointer; 17 | } 18 | 19 | .logo { 20 | display: flex; 21 | flex-direction: row; 22 | align-items: center; 23 | } 24 | 25 | .logo-image { 26 | background: url($logo) no-repeat; 27 | height: 20px; 28 | width: 124.5px; 29 | display: block; 30 | box-sizing: border-box; 31 | border: none; 32 | outline: none; 33 | } 34 | 35 | .search { 36 | label { 37 | color: $text1; 38 | font-size: 1em; 39 | margin-right: 0.3em; 40 | } 41 | 42 | input { 43 | background: $bg-main; 44 | color: $text1; 45 | border: 1px solid $input-border; 46 | box-sizing: border-box; 47 | font-size: 1em; 48 | padding: 0.5em 0.75em; 49 | 50 | &:focus { 51 | outline: 1px solid $main; 52 | } 53 | } 54 | 55 | button { 56 | padding: 0.5em 1.25em; 57 | cursor: pointer; 58 | background-color: $main; 59 | font-size: 1em; 60 | border-radius: 2px; 61 | color: #fff; 62 | font-family: "Rubik"; 63 | border: none; 64 | letter-spacing: 0.01em; 65 | } 66 | } 67 | } 68 | 69 | .error { 70 | border: 1px solid $border; 71 | box-sizing: border-box; 72 | border-radius: 2px; 73 | display: flex; 74 | background-color: $bg-main; 75 | padding: 2em; 76 | align-items: center; 77 | 78 | .error-state{ 79 | content:url($error-image); 80 | mix-blend-mode: $blend-mode; 81 | } 82 | 83 | .message { 84 | display: flex; 85 | flex-direction: column; 86 | 87 | h2 { 88 | font-size: 1.5em; 89 | letter-spacing: 0.01em; 90 | color: $text1; 91 | } 92 | 93 | h3 { 94 | line-height: 1.5em; 95 | font-size: 1em; 96 | color: $text3; 97 | &::after{ 98 | content: $error; 99 | } 100 | } 101 | 102 | } 103 | } 104 | 105 | .main { 106 | aside { 107 | .about { 108 | background: $bg-main; 109 | border: 1px solid $border; 110 | box-sizing: border-box; 111 | border-radius: 2px 2px 0px 0px; 112 | padding: 1em; 113 | display: flex; 114 | flex-direction: row; 115 | align-items: center; 116 | 117 | .dp { 118 | img { 119 | height: 44px; 120 | width: auto; 121 | border-radius: 100%; 122 | } 123 | 124 | margin-right: 0.75em; 125 | } 126 | 127 | .name { 128 | display: flex; 129 | flex-direction: column; 130 | justify-content: flex-start; 131 | white-space: nowrap; 132 | overflow: hidden; 133 | text-overflow: ellipsis; 134 | 135 | h1 { 136 | color: $text1; 137 | font-size: 1em; 138 | margin-bottom: 0.375em; 139 | } 140 | 141 | a { 142 | color: $main; 143 | text-decoration: none; 144 | font-size: 0.875em; 145 | } 146 | } 147 | } 148 | 149 | .stats { 150 | background: $bg-main; 151 | border-right: 1px solid $border; 152 | border-bottom: 1px solid $border; 153 | border-left: 1px solid $border; 154 | box-sizing: border-box; 155 | border-radius: 2px 2px 0px 0px; 156 | padding: 1em; 157 | display: flex; 158 | flex-direction: column; 159 | 160 | .item { 161 | display: flex; 162 | flex-direction: row; 163 | justify-content: space-between; 164 | margin-bottom: 1em; 165 | 166 | &:last-child { 167 | margin-bottom: 0; 168 | } 169 | 170 | h3 { 171 | font-size: 0.875em; 172 | letter-spacing: 0.01em; 173 | color: $aside-head; 174 | } 175 | 176 | p { 177 | font-size: 1em; 178 | letter-spacing: 0.01em; 179 | color: $aside-text; 180 | } 181 | } 182 | } 183 | 184 | .lang { 185 | background: $bg-main; 186 | border-right: 1px solid $border; 187 | border-bottom: 1px solid $border; 188 | border-left: 1px solid $border; 189 | box-sizing: border-box; 190 | border-radius: 2px 2px 0px 0px; 191 | padding: 0.5em; 192 | display: flex; 193 | flex-direction: row; 194 | flex-wrap: wrap; 195 | 196 | span { 197 | margin: 0.5em; 198 | text-align: center; 199 | font-size: 0.75em; 200 | letter-spacing: 0.01em; 201 | color: $main; 202 | padding: 0.5em; 203 | background-color: rgba($main, 0.05); 204 | border-radius: 1px; 205 | margin-right: 0.5em; 206 | } 207 | } 208 | 209 | .dates { 210 | background: $bg-main; 211 | border-right: 1px solid $border; 212 | border-bottom: 1px solid $border; 213 | border-left: 1px solid $border; 214 | box-sizing: border-box; 215 | border-radius: 2px 2px 0px 0px; 216 | padding: 1em; 217 | 218 | h4 { 219 | font-size: 0.75em; 220 | letter-spacing: 0.01em; 221 | color: $aside-head; 222 | } 223 | 224 | p { 225 | font-size: 0.875em; 226 | letter-spacing: 0.01em; 227 | color: $aside-text; 228 | margin-top: 0.5em; 229 | } 230 | 231 | .joined { 232 | margin-bottom: 1em; 233 | } 234 | 235 | .location { 236 | margin-bottom: 0.875em; 237 | 238 | p { 239 | color: $main; 240 | } 241 | } 242 | 243 | span { 244 | font-size: 0.875em; 245 | text-align: right; 246 | letter-spacing: 0.01em; 247 | color: $footer; 248 | } 249 | } 250 | } 251 | 252 | section { 253 | background: $bg-main; 254 | border: 1px solid $border; 255 | box-sizing: border-box; 256 | border-radius: 2px; 257 | 258 | h2 { 259 | font-size: 18px; 260 | letter-spacing: 0.01em; 261 | text-transform: uppercase; 262 | color: $text1; 263 | padding: 1.5em 1.5em 0 1.5em; 264 | } 265 | 266 | hr { 267 | margin: 0.75em 0; 268 | height: 0; 269 | border: 1px solid $border; 270 | } 271 | 272 | .activities { 273 | padding: 0 1.5em 1.5em 1.5em; 274 | 275 | .act { 276 | display: flex; 277 | padding: 0.75em 0; 278 | border-bottom: 1px solid $border; 279 | 280 | &:last-child { 281 | border-bottom: none; 282 | } 283 | 284 | .entry { 285 | font-size: 1em; 286 | letter-spacing: 0.01em; 287 | line-height: 1.5em; 288 | color: $text2; 289 | margin-right: 0.5em; 290 | } 291 | 292 | .time { 293 | font-size: 1em; 294 | letter-spacing: 0.01em; 295 | color: $text3; 296 | margin-left: 0.5em; 297 | line-height: 1.5em; 298 | text-align: right; 299 | flex-shrink: 0; 300 | } 301 | } 302 | } 303 | } 304 | } 305 | 306 | @media screen and (max-width: 767px) { 307 | 308 | padding: 1em; 309 | 310 | .main { 311 | display: flex; 312 | flex-direction: column-reverse; 313 | } 314 | 315 | header { 316 | flex-direction: column; 317 | justify-content: center; 318 | margin-top: 1.5em; 319 | 320 | .search { 321 | label { 322 | margin-right: 0; 323 | } 324 | 325 | form { 326 | margin-top: 1em; 327 | display: flex; 328 | align-items: center; 329 | justify-content: center; 330 | flex-direction: row; 331 | 332 | label { 333 | display: none; 334 | } 335 | 336 | button { 337 | margin-left: 0.5em; 338 | } 339 | } 340 | } 341 | } 342 | 343 | section { 344 | margin-bottom: 1em; 345 | .act { 346 | flex-direction: column; 347 | 348 | .time { 349 | margin: 0.25em 0 0 0; 350 | margin-left: 0 !important; 351 | text-align: left!important; 352 | } 353 | } 354 | .activities{ 355 | padding: 0 1em 1em 1em!important; 356 | } 357 | } 358 | 359 | .error { 360 | flex-direction: column; 361 | justify-content: center; 362 | 363 | h2 { 364 | margin-bottom: 0.5em; 365 | } 366 | } 367 | } 368 | 369 | @media screen and (min-width: 768px) { 370 | 371 | padding: 2em; 372 | max-width: 980px; 373 | margin: 0 auto; 374 | 375 | .main { 376 | display: flex; 377 | flex-direction: row; 378 | 379 | aside { 380 | margin-right: 2%; 381 | width: 28%; 382 | min-width: 240px; 383 | } 384 | 385 | section { 386 | width: 70%; 387 | 388 | .act { 389 | flex-direction: row; 390 | justify-content: space-between; 391 | } 392 | } 393 | } 394 | 395 | .error { 396 | flex-direction: row; 397 | 398 | .octocat { 399 | margin-right: 1.5em; 400 | } 401 | 402 | h2 { 403 | margin-bottom: 0.825em; 404 | } 405 | } 406 | } 407 | -------------------------------------------------------------------------------- /src/css/themes/dark.scss: -------------------------------------------------------------------------------- 1 | $main: #5c75f6; 2 | $bg-main: #24272e; 3 | $bg-overlay: #1a1c21; 4 | $border: #2e323b; 5 | $placeholder: rgba(255,255,255,0.2); 6 | $text1: rgba(255, 255, 255, 0.9); 7 | $text2: rgba(255, 255, 255, 0.8); 8 | $text3: rgba(255, 255, 255, 0.6); 9 | $aside-head: rgba(255, 255, 255, 0.8); 10 | $aside-text: rgba(255, 255, 255, 0.6); 11 | $footer: rgba(255, 255, 255, 0.4); 12 | $input-border: #2e323b; 13 | $moon: "./assets/moon-dark.svg"; 14 | $toggle-bg : #2E323B; 15 | $logo: "./assets/gitstalk-dark.svg"; 16 | $error: 'We did send our wizards :('; 17 | $error-image: './assets/error-dark.jpg'; 18 | $blend-mode: lighten; -------------------------------------------------------------------------------- /src/css/themes/light.scss: -------------------------------------------------------------------------------- 1 | $bg-main: #fff; 2 | $main: #5c75f6; 3 | $bg-overlay: #fdfdfd; 4 | $border: #f7f7f7; 5 | $placeholder: #bbb; 6 | $text1: #333; 7 | $text2: #666; 8 | $text3: #ccc; 9 | $aside-head: #888; 10 | $aside-text: #555; 11 | $footer: #aaa; 12 | $input-border: #f1f1f1; 13 | $moon: "./assets/moon-light.svg"; 14 | $toggle-bg : #EAEAEA; 15 | $logo: "./assets/gitstalk.svg"; 16 | $error: 'Even our strongest octocat failed to find it. :('; 17 | $error-image: './assets/error-light.png'; 18 | $blend-mode: normal; 19 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '@/components/Home' 4 | import Profile from '@/components/Profile' 5 | 6 | Vue.use(VueRouter) 7 | 8 | const routes = [ 9 | { 10 | path: '/', 11 | name: 'Home', 12 | component: Home 13 | }, 14 | { 15 | path: '/:id', 16 | name: 'Profile', 17 | component: Profile 18 | } 19 | ] 20 | 21 | const router = new VueRouter({ 22 | mode: 'history', 23 | base: process.env.BASE_URL, 24 | routes 25 | }) 26 | 27 | export default router 28 | -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | --------------------------------------------------------------------------------