code-pop / touring-vue-router Goto Github PK

JavaScript 30.36% HTML 13.25% Vue 56.39%

touring-vue-router's Introduction

Touring Vue Router Example App

This is the Vue 3 application we build step by step in the Touring Vue Router course on Vue Mastery. It's starting code is based on the final code from the Real World Vue 3 course.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

touring-vue-router's People

Contributors

Stargazers

Watchers

Forkers

kunhwanahn beatabozso nickpunt vl4d1mire hrach-1 calebgnz lindaccc konitzertraining chromenexus swsalim lennox-brain anirach karian7 girishkumaramanchi yenyee912 moniuch jokerinya nidhimshah cloud4dev vayctor k-el gedo147 ayaheka klimagi ghtali bobdeei adamfadly catalinpit artswork ne0lacamora gbaalat andrekolmeijer mailforstevetran phoelapyae geekmaros dzonii1996 michalzwierzyk dev-testing-code tupako lesleyheyer talhaberkkiymaz soura276 kboyd34 irleysilvestre rafael-buicu nathinho89 mariusmt19 treramey dimaklepikov fitzlm imanifaiz jherbin ahmedamin1700 chalacotallton sidulanaksekolahan gnrg86 jumn88 vue-studies area6586 jakvra datvaz manimovassagh aungmyokhant2465 alkomajunior ghostal titusfrezer dockspok bodoque0 hazynight sangmin4208 zahidhassanshaikot tayeb-khan tyidnet texaco360 erwinrumampouw nemwark daniel008 mobeenabdullah alexjhamilton99 stefanghiban chenzz wolfgangvollmer tsamsonov alex070285 computersrusltd jesperze radu-rotaru mellpadilha jhwarnock horxyz jmlovitsch iliamalac91 xsigns-ger barretoga ambial alemhar oliversssf2 ddvdv gregsypek samsslf

touring-vue-router's Issues

Branch L3-start wont serve

For a premium paid training site, I expect the code to run without having to faff around with garbage. When I run a freshly cloned L3-start I get this:
PS C:\Developer\Training\VueMastery\Touring-Vue-Router> npm run serve

[email protected] serve
vue-cli-service serve

INFO Starting development server...
10% building 2/2 modules 0 active(node:18728) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
10% building 2/5 modules 3 active ...s\eslint-loader\index.js??ref--13-0!C:\Developer\Training\VueMastery\Touring-Vue-Router\src\main.js E
rror: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at runSyncOrAsync (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
at iterateNormalLoaders (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array. (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array. (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at C:\Developer\Training\VueMastery\Touring-Vue-Router\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Can you PLEASE fix it, or refund my subscription

Broken routing in L9-end

On git checkout L9-end code when trying to navigate to EventList I get the following error:

Uncaught (in promise) Error: Invalid navigation guard. It has to do with not calling next() in beforeRouteEnter, (though in the code it's called during the then( of the promise. Not quite sure what the issue is here.

L10-end not working

Hi, I am getting the following error inside the console when clicking on Events in navigation.

function beforeRouteEnter(routeTo, routeFrom, next) {
    nprogress__WEBPACK_IMPORTED_MODULE_3___default.a.start();
    _services_EventService_js__WEBPACK_IMPORTED_MODULE_2__["default"].getEvents(2, parseInt(routeTo.query.page) || 1).then(function (response) {
      console.log("inside then response handling");
      next(function (comp) {
        comp.events = response.data;
        comp.totalEvents = response.headers['x-total-count'];
      });
    }).catch(function () {
      next({
        name: 'NetworkError'
      });
    }).finally(function () {
      nprogress__WEBPACK_IMPORTED_MODULE_3___default.a.done();
    });
  }```
. If you are returning a value instead of calling "next", make sure to remove the "next" parameter from your function.

L3-start cannot execute - weird crypto hash node module issue

Here are the steps I followed:

git clone https://github.com/Code-Pop/Touring-Vue-Router.git
npm install
npm run serve

` Touring-Vue-Router git:(main) ✗ npm run serve

[email protected] serve
vue-cli-service serve

INFO Starting development server...
10% building 2/2 modules 0 active(node:35386) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
10% building 2/4 modules 2 active /Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/webpack/hot/dev-server.jsnode:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (/Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/r00tmeister/vueMastery/Touring-Vue-Router/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1
➜ Touring-Vue-Router git:(main) ✗ `

Multiple ID usage

Hi,
There are two declarations of id="app" in this project, the first one here:

Touring-Vue-Router/src/App.vue

Line 2 in a16e6e1

and the second one here:

Touring-Vue-Router/public/index.html

Line 14 in a16e6e1

In one of the real-world-vue project there is only one usage in index.html page.
Is that a mistake? How does vue deal with that?

Different versions of vue routers in L9-start and L9-end package.json files

So I was trying to follow along the coding, I was not able to move forward after removing the watchEffect and replacing it with beforeRouteEnter. The issue I suppose was with the vue-router version installed. I compared the L9-start and L9-end package json and found the vue-router version were actually different. So I changed my vue-router version with the one from L9-end and it worked.