johnpapa/vue-getting-started

This project is seen in demos including the Pluralsight course "Vue: Getting Started" to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app.

Vue Getting Started

This project is seen in demos including the Pluralsight course "Vue: Getting Started" to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app.

by John Papa

Projects

This repository contains several projects. Each project represents a step in the learning experience. Two proejects of note are:

• 02-getting-started/end/vue-heroes - This is the starting point for the app
• xx-final/vue-heroes - This is the ending point for the app

Quick Start

1. Clone this repository

   git clone https://github.com/johnpapa/vue-getting-started.git
   cd vue-getting-started

2. Change to the folder you wish to use

   cd 02-getting-started/end/vue-heroes

3. Install the npm packages

   npm install

4. Run the app!

   npm run serve

Problems or Suggestions

Open an issue here

Resources

• VS Code
• VS Code Extension Marketplace
• VS Code - macOS keys
• VS Code - Windows keys
• Debugging Vue in VS Code

vue-getting-started's Issues

Begin script or PS video missing async during Watching Properties

When you collapse code during Watching Properties clip, there is code you haven't gone over yet that is included, specifically the async portion of the methods() without those bits the heroes will not load and the capeCounter will not respond to changes.

---- Enter your message above ----
autoplay: true
bufferedTime: 384.233333
bufferedPercent: 100
courseTitle: Vue: Getting Started
clipTitle: Watching Properties
clipId: cd3272a6-f494-4ce1-9649-63fa48a8cfa3
closedCaptioningEnabled: false
closedCaptioningLanguage: English
currentResolution: 720
currentTime: 238.980125
currentSrc: https://app.pluralsight.com/video/manifests/eyJ0b2tlbiI6IjYwMmE3MDc2NTEyMmZkODEwMDk4NzkzZWEzZWUwMGEzMTBjYmI2MTI0ZGE3NzBkMjA5YjMyNjE3MDA1MDRkYjQiLCJleHBpcmF0aW9uIjoxNTcyNTU0NzA4fQ==/cd3272a6-f494-4ce1-9649-63fa48a8cfa3/master.m3u8
date: Thu, 31 Oct 2019 19:45:17 GMT
embeddablePlayer: true
mediaType: hls
playbackSpeed: 1
playedPercent: 62.19661452433123
playing: true
sessionId: 6a5430ee-8069-44e6-a43c-e7d9a3719ab0
subtitle: Interacting within a Component: Watching Properties
title: Vue: Getting Started
versions: {"BUILD_VERSION":209,"VERSION":"0.0.68"}
userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
volume: 0.5

Segment 7 - "Invalid Date" for Origin Date

Hello,

I noticed that during the 07 - accessing - data section that the date-fns library is not formatting the JSON data correctly for originDate due to the fact that a string is being passed in as a string rather than a Date Object. When that happens, the date shows up as "Invalid Date" in the module as you implement new code regarding accessing data APIs.

I was able to fix it by doing this in data.js (line 12)
h.originDate = format((new Date(h.originDate).getFullYear(), new Date(h.originDate).getMonth(), new Date(h.originDate).getDay()), inputDateFormat);

Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-83_binding.node":

I just trying to follow the instruct :npm install ,it reported that
setting up Git hooks
can't find .git directory, skipping Git hooks installation

[email protected] install D:\Desktop\VUE\vue-getting-started\02-getting-started\end\vue-heroes\node_modules\node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-83_binding.node":

HTTP error 404 Not Found

even i tried to "cnpm install" failed too!

How does the delete mutation works if the action commit the id instead of the full hero object ?

Hi,

As pointed on twitter, at the end of the last chapter, i don't get how the delete mutation works as it seems that we commit the hero's id in the action, instead of the full hero object.

I'm probably missing something but here's how I read it :

We delete the hero and get is ID as response. We, then, commit the DELETE_HERO event with the deletedHeroId as parameter.

vue-getting-started/09-managing-state/end/vue-heroes/src/store/index.js

Lines 41 to 44 in cc05449

	async deleteHeroAction({ commit }, hero) {
	const deletedHeroId = await dataService.deleteHero(hero);
	commit(DELETE_HERO, deletedHeroId);
	},

In the mutation, we are expecting to receive the full hero object and filter on the id property of this object. But as seen above, I have the feeling the code should here receive the hero's ID as parameter and then do something like deletedHeroId.id which shouldn't work.

vue-getting-started/09-managing-state/end/vue-heroes/src/store/index.js

Lines 30 to 32 in cc05449

	[DELETE_HERO](state, hero) {
	state.heroes = [...state.heroes.filter(p => p.id !== hero.id)];
	},

To be sure, I checked if the dataservice effectively return the ID, and it seems to be correct. This is not a naming issue in the store.js delete action.

vue-getting-started/09-managing-state/end/vue-heroes/src/shared/data.service.js

Lines 60 to 69 in cc05449

	const deleteHero = async function(hero) {
	try {
	const response = await axios.delete(`${API}/heroes/${hero.id}`);
	parseItem(response, 200);
	return hero.id;
	} catch (error) {
	console.error(error);
	return null;
	}
	};

List and conditionals - v-if not working when selectedHero is undefined

Hi,

Setting selectedHero to undefined and using v-if on the div results in the error:

Error in render: "TypeError: Cannot read property 'firstName' of undefined"

It looks like the browser is still trying to render the fields. I've double checked that what I typed is identical to what's in the video and it's not working.

NPM 6.13.4
Node 12.14.0
Vue CLI 4.1.2

Proxy error

When I tried the project since the exercise 9 I have proxy error

Proxy error: Could not proxy request /api/heroes from localhost:8081 to http://localhost:8888. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

this error is driving me crazy

npm install fails

Hi,

npm install fails, I have no idea what is going on here as it was working half an hour ago, due to messing up the code, I just recloned the source code, and now it won't install please help
2021-02-10T12_23_38_464Z-debug.log

Unable to load directly into hero/villain details after Vuex imp

Hey!

After implemantion of Vuex, refreshing the page of the hero detail isn't working anymore. The problem is that the actions to get heroes/villains are in the heroes/villains component.

Vue latest library issue

<script src="https://cdn.jsdelivr.net/npm/vue"></script> does not seem to be working anymore, replaced it with <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> with latest library!

npm run serve failing

pm run serve

[email protected] serve
vue-cli-service serve

ERROR TypeError: transpileDependencies.map is not a function
TypeError: transpileDependencies.map is not a function
at genTranspileDepRegex (/Users/kvsnskmohan/Desktop/Vue.js/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-plugin-babel/index.js:5:38)
at module.exports (/Users/kvsnskmohan/Desktop/Vue.js/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-plugin-babel/index.js:21:29)
at /Users/kvsnskmohan/Desktop/Vue.js/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/Service.js:82:9
at Array.forEach ()
at loadedCallback (/Users/kvsnskmohan/Desktop/Vue.js/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/Service.js:80:20)
at Service.init (/Users/kvsnskmohan/Desktop/Vue.js/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/Service.js:97:14)
at Service.run (/Users/kvsnskmohan/Desktop/Vue.js/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/Service.js:247:16)
at Object. (/Users/kvsnskmohan/Desktop/Vue.js/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/bin/vue-cli-service.js:37:9)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)

An error when get the heroes

Now i'm doing the 8th lesson, but get an errors like this:
xhr.js:178
GET http://localhost:8080/api/heroes 431 (Request Header Fields Too Large)

data.service.js:20
Error: Request failed with status code 431

Error with Sass

In Pluralsight Vue: Getting Started course:

Section 2, Getting Started with Vue
Lession: Getting and Exploring the Sample Code

I followed all instructions in the video but I encounter an error when I run the command npm run serve:

INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 1 errors 8:53:53 PM

error in ./src/app.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
Require stack:

• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/sass-loader/lib/loader.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/loader-runner/lib/loadLoader.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/NormalModule.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/NormalModuleFactory.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/Compiler.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/webpack/lib/webpack.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/commands/serve.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/lib/Service.js
• /Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/@vue/cli-service/bin/vue-cli-service.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
  at Function.Module._load (internal/modules/cjs/loader.js:725:27)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at require (internal/modules/cjs/helpers.js:88:18)
  at Object.sassLoader (/Users/michaelalbrecht/Desktop/LearningVue/vue-getting-started/02-getting-started/end/vue-heroes/node_modules/sass-loader/lib/loader.js:46:72)

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&lang=scss& 4:14-415 14:3-18:5 15:22-423
@ ./src/app.vue?vue&type=style&index=0&lang=scss&
@ ./src/app.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.5:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Is this an issue because I have different versions of vue, npm, and/or node? Thanks.

Date mismatch in originDate, after using filter ahead one Day (+1)

Hey @johnpapa

In 05-interacting-within-a-component lesson in ourHeroes data like below

FYI : https://github.com/johnpapa/vue-getting-started/blob/master/05-interacting-within-a-component/end/vue-heroes/src/components/heroes.vue

const ourHeroes = [
  {
    id: 10,
    firstName: 'Ella',
    lastName: 'Papa',
    capeCounter: 1,
    originDate: format(new Date(1996, 5, 1), inputDateFormat),
    description: 'fashionista',
  },
  {
    id: 20,
    firstName: 'Madelyn',
    lastName: 'Papa',
    capeCounter: 3,
    originDate: format(new Date(1998, 7, 1), inputDateFormat),
    description: 'the cat whisperer',
  },
  {
    id: 30,
    firstName: 'Haley',
    lastName: 'Papa',
    capeCounter: 2,
    originDate: format(new Date(1999, 8, 1), inputDateFormat),
    description: 'pen wielder',
  },
  {
    id: 40,
    firstName: 'Landon',
    lastName: 'Papa',
    capeCounter: 0,
    originDate: format(new Date(2000, 9, 1), inputDateFormat),
    description: 'arc trooper',
  },
];

While at run time it shows increasing date (+1 day) how can i fix this

npm install fails every time now

Hi, I really don't know what's happened, but it was all running fine, I messed up the code and just recloned the repo to do a reset, and now npm fails. I'm completely lost. last time this happened, it was due to node-modules in the wrong folder, I currently have no folders marked "node_modules" anywhere on this computer now I've cleared the cache, but still I can't get any of the lessons to now work as node simply won't do it's job. here is the error message I am getting when I run npm install:
npm ERR! code 1 npm ERR! path /home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-sass npm ERR! command failed npm ERR! command sh -c node scripts/build.js npm ERR! Building: /usr/bin/node /home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= npm ERR! gyp info it worked if it ends with ok npm ERR! gyp verb cli [ npm ERR! gyp verb cli '/usr/bin/node', npm ERR! gyp verb cli '/home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-gyp/bin/node-gyp.js', npm ERR! gyp verb cli 'rebuild', npm ERR! gyp verb cli '--verbose', npm ERR! gyp verb cli '--libsass_ext=', npm ERR! gyp verb cli '--libsass_cflags=', npm ERR! gyp verb cli '--libsass_ldflags=', npm ERR! gyp verb cli '--libsass_library=' npm ERR! gyp verb cli ] npm ERR! gyp info using [email protected] npm ERR! gyp info using [email protected] | linux | x64 npm ERR! gyp verb command rebuild [] npm ERR! gyp verb command clean [] npm ERR! gyp verb clean removing "build" directory npm ERR! gyp verb command configure [] npm ERR! gyp verb check python checking for Python executable "/home/rob/anaconda3/bin/python3" in the PATH npm ERR! gyp verb which` succeeded /home/rob/anaconda3/bin/python3 /home/rob/anaconda3/bin/python3
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: /home/rob/anaconda3/bin/python3 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (child_process.js:308:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (events.js:315:20)
npm ERR! gyp ERR! stack at maybeClose (internal/child_process.js:1048:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
npm ERR! gyp ERR! System Linux 5.4.0-65-generic
npm ERR! gyp ERR! command "/usr/bin/node" "/home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-sass
npm ERR! gyp ERR! node -v v14.15.5
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR! /home/rob/.npm/_logs/2021-02-16T00_11_04_924Z-debug.log
❯ node-gyp --version
v7.1.2
❯ npm cache verify
Cache verified and compressed (/.npm/_cacache)
Content verified: 1293 (31071323 bytes)
Index entries: 1293
Finished in 3.128s
❯ npm cache clean --force
npm WARN using --force Recommended protections disabled.
❯ npm cache verify
Cache verified and compressed (/.npm/_cacache)
Content verified: 0 (0 bytes)
Index entries: 0
Finished in 0.013s
❯ npm install
npm ERR! code 1
npm ERR! path /home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/bin/node /home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli '/usr/bin/node',
npm ERR! gyp verb cli '/home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "/home/rob/anaconda3/bin/python3" in the PATH
npm ERR! gyp verb which succeeded /home/rob/anaconda3/bin/python3 /home/rob/anaconda3/bin/python3
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: /home/rob/anaconda3/bin/python3 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (child_process.js:308:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (events.js:315:20)
npm ERR! gyp ERR! stack at maybeClose (internal/child_process.js:1048:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
npm ERR! gyp ERR! System Linux 5.4.0-65-generic
npm ERR! gyp ERR! command "/usr/bin/node" "/home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/rob/Development/vue-getting-started/05-interacting-within-a-component/begin/vue-heroes/node_modules/node-sass
npm ERR! gyp ERR! node -v v14.15.5
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR! /home/rob/.npm/_logs/2021-02-16T00_13_56_833Z-debug.log`

On stack exchange they said I needed to install python 2.7 and node-gyp, because they see it in the error message. I assume this is a config file that is accommodating various types of system, as I have never had either of those on this iteration of Linux Mint 20, as it does no longer ship with python 2.7 and I was able to get up to leve4 of the course without those libraries installed before. please help. I've spent 48 hours currently trying to solve this. My only other option is a full os reinstall as I don't know how node works but it likely leaves some kind of hidden .config file that will perpetuate the issue.