upgrading app to vue 3

Author: Chris

quiz-app/.eslintrc.cjs

@@ -0,0 +1,11 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

quiz-app/.eslintrc.js

@@ -1 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

quiz-app/.gitignore

@@ -1,5 +1,5 @@
 {
-    "staticWebApps.appSubpath": "/",
-    "staticWebApps.apiSubpath": "api",
-    "staticWebApps.outputSubpath": "dist"
-}
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  }
+}

quiz-app/.vscode/settings.json

@@ -1,113 +1,35 @@
-# Quizzes
+# vue-project
 
-These quizzes are the pre- and post-lecture quizzes for the web development for beginners curriculum at https://aka.ms/webdev-beginners
+This template should help get you started developing with Vue 3 in Vite.
 
-## Project setup
+## Recommended IDE Setup
 
-```
-npm install
-```
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
-### Compiles and hot-reloads for development
+## Customize configuration
 
-```
-npm run serve
-```
+See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-### Compiles and minifies for production
+## Project Setup
 
-```
-npm run build
+```sh
+npm install
 ```
 
-### Lints and fixes files
+### Compile and Hot-Reload for Development
 
+```sh
+npm run dev
 ```
-npm run lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
-
-Credits: Thanks to the original version of this quiz app: https://github.com/arpan45/simple-quiz-vue
-
-## Deploying to Azure
 
-Here’s a step-by-step guide to help you get started:
+### Compile and Minify for Production
 
-1. Fork the a GitHub Repository
-Ensure your static web app code is in your GitHub repository. Fork this repository.
-
-2. Create an Azure Static Web App
-- Create and [Azure account](http://azure.microsoft.com)
-- Go to the [Azure portal](https://portal.azure.com) 
-- Click on “Create a resource” and search for “Static Web App”.
-- Click “Create”.
-
-3. Configure the Static Web App
-- Basics: Subscription: Select your Azure subscription.
-- Resource Group: Create a new resource group or use an existing one.
-- Name: Provide a name for your static web app.
-- Region: Choose the region closest to your users.
-
-- #### Deployment Details:
-- Source: Select “GitHub”.
-- GitHub Account: Authorize Azure to access your GitHub account.
-- Organization: Select your GitHub organization.
-- Repository: Choose the repository containing your static web app.
-- Branch: Select the branch you want to deploy from.
-
-- #### Build Details:
-- Build Presets: Choose the framework your app is built with (e.g., React, Angular, Vue, etc.).
-- App Location: Specify the folder containing your app code (e.g., / if it’s in the root).
-- API Location: If you have an API, specify its location (optional).
-- Output Location: Specify the folder where the build output is generated (e.g., build or dist).
-
-4. Review and Create
-Review your settings and click “Create”. Azure will set up the necessary resources and create a GitHub Actions workflow in your repository.
-
-5. GitHub Actions Workflow
-Azure will automatically create a GitHub Actions workflow file in your repository (.github/workflows/azure-static-web-apps-<name>.yml). This workflow will handle the build and deployment process.
-
-6. Monitor the Deployment
-Go to the “Actions” tab in your GitHub repository.
-You should see a workflow running. This workflow will build and deploy your static web app to Azure.
-Once the workflow completes, your app will be live on the provided Azure URL.
-
-### Example Workflow File
-
-Here’s an example of what the GitHub Actions workflow file might look like:
-name: Azure Static Web Apps CI/CD
-```
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
-
-jobs:
-  build_and_deploy_job:
-    runs-on: ubuntu-latest
-    name: Build and Deploy Job
-    steps:
-      - uses: actions/checkout@v2
-      - name: Build And Deploy
-        id: builddeploy
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          action: "upload"
-          app_location: "/quiz-app # App source code path"
-          api_location: ""API source code path optional
-          output_location: "dist" #Built app content directory - optional
+```sh
+npm run build
 ```
 
-### Additional Resources
-- [Azure Static Web Apps Documentation](https://learn.microsoft.com/azure/static-web-apps/getting-started)
-- [GitHub Actions Documentation](https://docs.github.com/actions/use-cases-and-examples/deploying/deploying-to-azure-static-web-app)
+### Lint with [ESLint](https://eslint.org/)
 
+```sh
+npm run lint
+```

quiz-app/LICENSE

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

quiz-app/README.md

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}