T04 vue3

[braughtg]

Type of Work

ⓘ Check the box beside the Type of Work to indicate whether this pull request is for a tutorial or an extension. If editing, place an X in the [ ] (e.g. [X] to check it.

• - Tutorial
• - Extension

Topic

ⓘ Check the box beside the topic to which course topic this pull request applies. If editing, place an X in the [ ] (e.g. [X] to check it.

• - 01 - HTML/CSS/JS
• - 02 - Vue 1
• - 03 - Vue 2
• - 04 - Vue 3
• - 05 - Vue 4
• - 06 - Cypress Testing
• - 07 - Vue Lifecycle Hooks and API Calls

Time Estimate

ⓘ Provide an estimate of the number of hours you spent working on the contents of this pull request.

Additional Information

ⓘ Provide any feedback you have that might help improve this assignment for future students.

[github-actions]

Thank you for your pull request.

Note that all new pull requests to the Vue3-WebDev-Kit are opened as draft pull requests.

Submitting Your Work

When you believe your work on the assignment is complete mark your pull request as ready for review to turn it in.

Getting Help

If you have questions as you work you can get in touch via:

• comments on this pull request.
• comments on the associated issue(s).
• any other course communication channel(s).

[braughtg]

@copilot review this pull request

[braughtg]

@copilot review this pull request

[braughtg]

used for testing.

[Copilot]

🟡 Changes recommended

The Tutorial 04 rubric references web-projects/flashword/style.css but the PR adds/links styles.css, which is likely to cause the submission to miss the stated criteria.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR adds the “FlashWord” Vue 3 tutorial implementation in both a CDN-based version (web-projects/flashword) and a Vite-based version (web-projects/flashword-vite), along with the earlier “first-website” tutorial files and a small spelling-dictionary update.

Changes:

• Added a Vue 3 FlashWord app using the Vue global build (HTML/CSS/JS under web-projects/flashword).
• Added a Vite + Vue FlashWord project scaffold and a FlashWord implementation in src/App.vue.
• Added Tutorial 01 “first-website” starter HTML/CSS/JS and updated .cspell.json word list.

Workflow

Requirement	Status	Notes
The pull request contains at least three commits.	❌	Not verifiable from the provided diff/metadata; please confirm PR commit count meets the requirement.
The commit messages briefly describe the changes made in the commit.	❌	Not verifiable from the provided diff/metadata; please confirm commit messages meet the requirement.

Building FlashWord

Requirement	Status	Notes
web-projects/flashword/index.html contains a <div> for displaying each word.	✅	Implemented via the per-word <div class="card" v-for="word in shuffledWords">.
web-projects/flashword/app.js contains an array words with hola, uno, gris.	✅	Present in words array.
web-projects/flashword/app.js contains computed shuffledWords and wordCount.	✅	Both computed properties present.
web-projects/flashword/app.js contains a watch for correctCount.	✅	watch: { correctCount() { ... } } present.
web-projects/flashword/app.js contains the checkAnswer method.	✅	methods: { checkAnswer(word) { ... } } present.

Installing Vite

Requirement	Status	Notes
web-projects/flashword-vite directory exists.	✅	Directory and files present in this PR.
package.json has dependencies of Vue and Vite.	✅	Vue in dependencies; Vite in devDependencies.
vite.config.js exists.	✅	Present as web-projects/flashword-vite/vite.config.js.

Working with Vite and Vue

Requirement	Status	Notes
<script> in web-projects/flashword-vite/src/App.vue contains approximately the content from web-projects/flashword/index.html.	✅	Component includes the app logic in <script> and markup in <template> (overall SFC mirrors the non-Vite version).
<template> in web-projects/flashword-vite/src/App.vue contains approximately the content from web-projects/flashword/index.html.	✅	Template closely matches the non-Vite HTML structure.
<style> in web-projects/flashword-vite/src/App.vue contains approximately the content from web-projects/flashword/style.css.	❌	The PR adds web-projects/flashword/styles.css (plural), so the referenced style.css file does not exist as named in the criteria.

File summaries

File	Description
web-projects/flashword/styles.css	Adds styling for the non-Vite FlashWord page.
web-projects/flashword/index.html	Adds the Vue 3 global-build FlashWord UI markup.
web-projects/flashword/app.js	Adds the Vue 3 global-build FlashWord app logic.
web-projects/flashword-vite/vite.config.js	Adds Vite configuration for the Vite-based version.
web-projects/flashword-vite/src/style.css	Adds default Vite scaffold styles.
web-projects/flashword-vite/src/main.js	Boots the Vue app and mounts App.vue.
web-projects/flashword-vite/src/components/HelloWorld.vue	Adds scaffold component file.
web-projects/flashword-vite/src/assets/vue.svg	Adds Vue logo asset used by scaffold.
web-projects/flashword-vite/src/App.vue	Implements FlashWord inside a Vue SFC (logic/template/style).
web-projects/flashword-vite/README.md	Adds a brief project README.
web-projects/flashword-vite/public/vite.svg	Adds Vite logo asset.
web-projects/flashword-vite/package.json	Defines Vite/Vue scripts and dependencies.
web-projects/flashword-vite/package-lock.json	Locks Node dependencies for the Vite project.
web-projects/flashword-vite/index.html	Adds Vite entry HTML that mounts the app.
web-projects/flashword-vite/.vscode/extensions.json	Recommends Volar for Vue editing.
web-projects/flashword-vite/.gitignore	Ignores node_modules/dist and editor artifacts.
web-projects/first-website/styles/style.css	Adds Tutorial 01 CSS styling.
web-projects/first-website/scripts/main.js	Adds Tutorial 01 JS behavior (image toggle + localStorage name).
web-projects/first-website/index.html	Adds Tutorial 01 HTML page structure.
.cspell.json	Adds a couple of words to the spelling dictionary.

Review details

Files not reviewed (1)

• web-projects/flashword-vite/package-lock.json: Generated file

• Files reviewed: 17/22 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.