07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue

@@ -3,17 +3,19 @@
    <header>
      <h1>My friends</h1>
    </header>
    <new-friend @add-contact="addContact"></new-friend>
    <ul>
      <friend-contact 
      v-for="friend in friends"
      :key="friend.id"
      :id="friend.id"
      :name="friend.name" 
      :phone-number="friend.phone" 
      :email-address="friend.email"
      :is-favorite="friend.isFavorite"
      @toggle-favorite="toggleFavoriteStatus"
      ></friend-contact>
      <friend-contact v-for="friend in friends" 
        :key="friend.id" 
        :id="friend.id" 
        :name="friend.name"
        :phone-number="friend.phone" 
        :email-address="friend.email" 
        :is-favorite="friend.isFavorite"
        @toggle-favorite="toggleFavoriteStatus"
        @delete="deleteContact" 
        >
      </friend-contact>
    </ul>
  </section>
</template>
@@ -35,18 +37,38 @@
          name: "Julie Jones",
          phone: "09876 543 221",
          email: "julie@localhost.com",
          isFavorite: true,          
          isFavorite: true,
        },
      ],
    }
  },
  methods:{
    toggleFavoriteStatus(friendId){
      const found = this.friends.find( 
  watch: {

  },
  methods: {
    toggleFavoriteStatus(friendId) {
      const found = this.friends.find(
        (friend) => friend.id === friendId
      );
      found.isFavorite = !found.isFavorite;
    }
    },

    addContact(name, phone, email) {
      const newFriendContact={
        id: new Date().toISOString + name,
        name: name,
        phone: phone,
        email:email,
      };

      this.friends.push(newFriendContact);
    },
    deleteContact (friendId){
        this.friends = this.friends.filter(
          (friend) => friend.id != friendId
        );
    },

  }
};
</script>
@@ -84,7 +106,8 @@
  list-style: none;
}

#app li {
#app li,
#app form {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
@@ -117,4 +140,20 @@
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

#app input {
  font: inherit;
  padding: 0.15rem;
}

#app label {
  font-weight: bold;
  margin-right: 1rem;
  width: 7rem;
  display: inline-block;
}

#app form div {
  margin: 1rem 0;
}
</style>

 07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue

@@ -12,6 +12,7 @@
            <li><strong>Phone:</strong> {{ phoneNumber }}</li>
            <li><strong>Email:</strong> {{ emailAddress }}</li>
        </ul>
        <button @click="$emit('delete', id)">Delete</button>
    </li>
</template>

@@ -49,7 +50,7 @@
            // }
        },
    },
    emits:['toggle-favorite'],
    emits:['toggle-favorite', 'delete'],
    // emits: {
    //     'toggle-favorite': function (id) {
    //         if (id) {
@@ -71,6 +72,9 @@
        toggleFavorite() {
            this.$emit('toggle-favorite', this.id);
        },
        // deleteFriend(){
        //     this.$emit('delete', this.id);
        // }
    },
};
</script>

 07 - development setup/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue

New file
@@ -0,0 +1,39 @@
<template>
    <form @submit.prevent="submitData">
        <div>
            <label>Nome:</label>
            <input type="text" v-model="name" /><br>
        </div>
        <div>
            <label>Phone:</label>
            <input type="tel" v-model="phone" /><br>
        </div>
        <div>
            <label>Email:</label>
            <input type="email" v-model="email" /><br>
        </div>
        <div>
            <button>Add new friend</button>
        </div>
    </form>
</template>

<script>
export default {
    data() {
        return {
            name: "",
            phone: "",
            email: "",
        }
    },
    emits: ['add-contact'],
    methods: {
        submitData() {
            this.$emit('add-contact', this.name, this.phone, this.email);
        }
    }
}
</script>

<style></style>

 07 - development setup/vue-cli-01-a-new-vue-project/src/main.js

@@ -2,9 +2,11 @@

import App from "./App.vue";
import FriendContact from "./components/FriendContact.vue";
import NewFriend from "./components/NewFriend.vue";

const app = createApp(App);

app.component("friend-contact", FriendContact);
app.component("new-friend", NewFriend);

app.mount("#app");

 07 - development setup/vue-cli-02-adding-a-component/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 07 - development setup/vue-cli-02-adding-a-component/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 07 - development setup/vue-cli-02-adding-a-component/.gitignore

New file
@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 07 - development setup/vue-cli-02-adding-a-component/HOW-TO-USE.pdf

Binary files differ

 07 - development setup/vue-cli-02-adding-a-component/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 07 - development setup/vue-cli-02-adding-a-component/package.json

New file
@@ -0,0 +1,23 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

 07 - development setup/vue-cli-02-adding-a-component/public/favicon.ico

 07 - development setup/vue-cli-02-adding-a-component/public/index.html

New file
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 07 - development setup/vue-cli-02-adding-a-component/src/App.vue

New file
@@ -0,0 +1,32 @@
<template>
  <section>
    <h2>My Friends</h2>
    <ul>
      <friend-contact></friend-contact>
      <friend-contact></friend-contact>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "0987 654421 21",
          email: "julie@localhost.com",
        },
      ],
    };
  },
};
</script>

 07 - development setup/vue-cli-02-adding-a-component/src/components/FriendContact.vue

New file
@@ -0,0 +1,37 @@
<template>
  <li>
    <h2>{{ friend.name }}</h2>
    <button @click="toggleDetails">Show Details</button>
    <ul v-if="detailsAreVisible">
      <li>
        <strong>Phone:</strong>
        {{ friend.phone }}
      </li>
      <li>
        <strong>Email:</strong>
        {{ friend.email }}
      </li>
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "0123 45678 90",
        email: "manuel@localhost.com",
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    }
  }
};
</script>

 07 - development setup/vue-cli-02-adding-a-component/src/main.js

New file
@@ -0,0 +1,10 @@
import { createApp } from 'vue';

import App from './App.vue';
import FriendContact from './components/FriendContact.vue';

const app = createApp(App);

app.component('friend-contact', FriendContact);

app.mount('#app');

 07 - development setup/vue-cli-03-finished/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 07 - development setup/vue-cli-03-finished/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 07 - development setup/vue-cli-03-finished/.gitignore

New file
@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 07 - development setup/vue-cli-03-finished/HOW-TO-USE.pdf

Binary files differ

 07 - development setup/vue-cli-03-finished/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 07 - development setup/vue-cli-03-finished/package.json

New file
@@ -0,0 +1,23 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

 07 - development setup/vue-cli-03-finished/public/favicon.ico

 07 - development setup/vue-cli-03-finished/public/index.html

New file
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 07 - development setup/vue-cli-03-finished/src/App.vue

New file
@@ -0,0 +1,92 @@
<template>
  <section>
    <header>
      <h1>My Friends</h1>
    </header>
    <ul>
      <friend-contact></friend-contact>
      <friend-contact></friend-contact>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "0987 654421 21",
          email: "julie@localhost.com",
        },
      ],
    };
  },
};
</script>

<style>
* {
  box-sizing: border-box;
}
html {
  font-family: "Jost", sans-serif;
}
body {
  margin: 0;
}
header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}
#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}
</style>

 07 - development setup/vue-cli-03-finished/src/components/FriendContact.vue

New file
@@ -0,0 +1,37 @@
<template>
  <li>
    <h2>{{ friend.name }}</h2>
    <button @click="toggleDetails">Show Details</button>
    <ul v-if="detailsAreVisible">
      <li>
        <strong>Phone:</strong>
        {{ friend.phone }}
      </li>
      <li>
        <strong>Email:</strong>
        {{ friend.email }}
      </li>
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "0123 45678 90",
        email: "manuel@localhost.com",
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    }
  }
};
</script>

 07 - development setup/vue-cli-03-finished/src/main.js

New file
@@ -0,0 +1,10 @@
import { createApp } from 'vue';

import App from './App.vue';
import FriendContact from './components/FriendContact.vue';

const app = createApp(App);

app.component('friend-contact', FriendContact);

app.mount('#app');

 08 - component communication/cmp-communication-01-starting-setup/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 08 - component communication/cmp-communication-01-starting-setup/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 08 - component communication/cmp-communication-01-starting-setup/.gitignore

New file
@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 08 - component communication/cmp-communication-01-starting-setup/HOW-TO-USE.pdf

Binary files differ

 08 - component communication/cmp-communication-01-starting-setup/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 08 - component communication/cmp-communication-01-starting-setup/package.json

New file
@@ -0,0 +1,23 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

 08 - component communication/cmp-communication-01-starting-setup/public/favicon.ico

 08 - component communication/cmp-communication-01-starting-setup/public/index.html

New file
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 08 - component communication/cmp-communication-01-starting-setup/src/App.vue

New file
@@ -0,0 +1,92 @@
<template>
  <section>
    <header>
      <h1>My Friends</h1>
    </header>
    <ul>
      <friend-contact></friend-contact>
      <friend-contact></friend-contact>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "0987 654421 21",
          email: "julie@localhost.com",
        },
      ],
    };
  },
};
</script>

<style>
* {
  box-sizing: border-box;
}
html {
  font-family: "Jost", sans-serif;
}
body {
  margin: 0;
}
header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}
#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}
#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}
</style>

 08 - component communication/cmp-communication-01-starting-setup/src/components/FriendContact.vue

New file
@@ -0,0 +1,37 @@
<template>
  <li>
    <h2>{{ friend.name }}</h2>
    <button @click="toggleDetails">{{ detailsAreVisible ? 'Hide' : 'Show' }} Details</button>
    <ul v-if="detailsAreVisible">
      <li>
        <strong>Phone:</strong>
        {{ friend.phone }}
      </li>
      <li>
        <strong>Email:</strong>
        {{ friend.email }}
      </li>
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "0123 45678 90",
        email: "manuel@localhost.com",
      },
    };
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible;
    }
  }
};
</script>

 08 - component communication/cmp-communication-01-starting-setup/src/main.js

New file
@@ -0,0 +1,10 @@
import { createApp } from 'vue';

import App from './App.vue';
import FriendContact from './components/FriendContact.vue';

const app = createApp(App);

app.component('friend-contact', FriendContact);

app.mount('#app');

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/.gitignore

New file
@@ -0,0 +1,24 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

package-lock.json

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/HOW-TO-USE.pdf

Binary files differ

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/package.json

New file
@@ -0,0 +1,26 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },
  "prettier": {
    "singleQuote": true
  }
}

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/public/favicon.ico

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/public/index.html

New file
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/App.vue

New file
@@ -0,0 +1,117 @@
<template>
  <div>
    <active-element
      :topic-title="activeTopic && activeTopic.title"
      :text="activeTopic && activeTopic.fullText"
    ></active-element>
    <knowledge-base ></knowledge-base>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topics: [
        {
          id: 'basics',
          title: 'The Basics',
          description: 'Core Vue basics you have to know',
          fullText:
            'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
        },
        {
          id: 'components',
          title: 'Components',
          description:
            'Components are a core concept for building Vue UIs and apps',
          fullText:
            'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
        },
      ],
      activeTopic: null,
    };
  },
  provide(){
    return {
      topics: this.topics,
      selectTopic: this.activateTopic,
    }
  },
  methods: {
    activateTopic(topicId) {
      this.activeTopic = this.topics.find((topic) => topic.id === topicId);
    },
  },
  mounted(){
    setTimeout(() => {
      this.topics.push({
          id: 'events',
          title: 'Events',
          description: 'Vieni all\'evento',
          fullText:
            'Gli eventi ti permettono di triggherare il codice on demand',
        });
    }, 3000);
  }
};
</script>

<style>
* {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
}
body {
  margin: 0;
}
section {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 2rem auto;
  max-width: 40rem;
  padding: 1rem;
  border-radius: 12px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

li {
  border-radius: 12px;
  border: 1px solid #ccc;
  padding: 1rem;
  width: 15rem;
  margin: 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

h2 {
  margin: 0.75rem 0;
  text-align: center;
}

button {
  font: inherit;
  border: 1px solid #c70053;
  background-color: #c70053;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 30px;
  cursor: pointer;
}

button:hover,
button:active {
  background-color: #e24d8b;
  border-color: #e24d8b;
}
</style>

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/components/ActiveElement.vue

New file
@@ -0,0 +1,12 @@
<template>
  <section>
    <h2>{{ topicTitle }}</h2>
    <p>{{ text }}</p>
  </section>
</template>

<script>
export default {
  props: ['topicTitle', 'text'],
};
</script>

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeBase.vue

New file
@@ -0,0 +1,11 @@
<template>
  <section>
    <h2>Select a Topic</h2>
    <knowledge-grid ></knowledge-grid>
  </section>
</template>

<script>
export default {
};
</script>

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeElement.vue

New file
@@ -0,0 +1,15 @@
<template>
  <li>
    <h3>{{ topicName }}</h3>
    <p>{{ description }}</p>
    <button @click="selectTopic(id)">Learn More</button>
  </li>
</template>

<script>
export default {
  inject: ['selectTopic'],
  props: ['id', 'topicName', 'description'],
  emits: ['select-topic'],
};
</script>

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/components/KnowledgeGrid.vue

New file
@@ -0,0 +1,17 @@
<template>
  <ul>
    <knowledge-element
      v-for="topic in topics"
      :key="topic.id"
      :id="topic.id"
      :topic-name="topic.title"
      :description="topic.description"
    ></knowledge-element>
  </ul>
</template>

<script>
export default {
  inject: ['topics'],
};
</script>

 08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/main.js

New file
@@ -0,0 +1,16 @@
import { createApp } from 'vue';

import App from './App.vue';
import ActiveElement from './components/ActiveElement.vue';
import KnowledgeBase from './components/KnowledgeBase.vue';
import KnowledgeElement from './components/KnowledgeElement.vue';
import KnowledgeGrid from './components/KnowledgeGrid.vue';

const app = createApp(App);

app.component('active-element', ActiveElement);
app.component('knowledge-base', KnowledgeBase);
app.component('knowledge-element', KnowledgeElement);
app.component('knowledge-grid', KnowledgeGrid);

app.mount('#app');

 08 - component communication/cmp-communication-assignment-problem/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 08 - component communication/cmp-communication-assignment-problem/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 08 - component communication/cmp-communication-assignment-problem/.gitignore

New file
@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 08 - component communication/cmp-communication-assignment-problem/HOW-TO-USE.pdf

Binary files differ

 08 - component communication/cmp-communication-assignment-problem/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 08 - component communication/cmp-communication-assignment-problem/package-lock.json

New file
Diff too large

 08 - component communication/cmp-communication-assignment-problem/package.json

New file
@@ -0,0 +1,23 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

 08 - component communication/cmp-communication-assignment-problem/public/favicon.ico

 08 - component communication/cmp-communication-assignment-problem/public/index.html

New file
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 08 - component communication/cmp-communication-assignment-problem/src/App.vue

New file
@@ -0,0 +1,118 @@
<template>

    <section>
        <header>
            Esercizio
        </header>
        <active-user :username="user.username" :age="user.age"></active-user>
        <user-data @update-user="updateUser"></user-data>
    </section>
</template>

<script>
export default {
    data() {
        return {
            user: {
                username: "mario",
                age: "38",
            }
        }
    },
    methods:{
        updateUser(user, age){
            this.user.username = user;
            this.user.age = age;
        }
    }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

* {
    box-sizing: border-box;
}

html {
    font-family: 'Jost', sans-serif;
}

body {
    margin: 0;
}

header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 3rem auto;
    border-radius: 10px;
    padding: 1rem;
    background-color: #58004d;
    color: white;
    text-align: center;
    width: 90%;
    max-width: 40rem;
}

#app form {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 1rem auto;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    width: 90%;
    max-width: 40rem;
}

#app h2 {
    font-size: 2rem;
    color: #58004d;
    margin: 0 0 0 0;
}

#app button {
    font: inherit;
    cursor: pointer;
    border: 1px solid #08301a;
    background-color: #08301a;
    color: white;
    padding: 0.05rem 1rem;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
    border-radius: 10px;
}

#app button:hover,
#app button:active {
    background-color: #ec3169;
    border-color: #ec3169;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

#app input {
    font: inherit;
    padding: 0.15rem;
}

#app label {
    font-weight: bold;
    margin-right: 1rem;
    width: 7rem;
    display: inline-block;
}

#app form div {
    margin: 1rem 0;
}

#app .user{
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 1rem auto;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    width: 90%;
    max-width: 40rem;

}
</style>

 08 - component communication/cmp-communication-assignment-problem/src/components/ActiveUser.vue

New file
@@ -0,0 +1,21 @@
<template>
    <div class="user">
        <h2>Utente: {{ username }}</h2>
        <h3>Eta: {{ age }}</h3>
    </div>
</template>

<script>
export default {
    props: {
        username: {
            title: String,
            required: true,
        },
        age: {
            title: String,
            required: true,
        },
    }
}
</script>

 08 - component communication/cmp-communication-assignment-problem/src/components/UserData.vue

New file
@@ -0,0 +1,38 @@
<template>
    <form @submit.prevent="submitData">
        <div>
            <label>Utente: </label>
            <input type="text" v-model="username">
        </div>
        <div>
            <label>Eta: </label>
            <input type="text" v-model="age">
        </div>
        <div>
            <button>Update</button>
        </div>
    </form>
</template>

<script>
export default {
    data() {
        return {
            username: "",
            age: "",
        }
    },
    emits: ['update-user'],
    methods: {
        submitData() {

            if (this.username !== "" && this.age !== "") {
                this.$emit('update-user', this.username, this.age);
            } else {
                alert("insert data");
            }

        }
    }
}
</script>

 08 - component communication/cmp-communication-assignment-problem/src/main.js

New file
@@ -0,0 +1,26 @@
import { createApp } from 'vue'

import App from "./App.vue";
import ActiveUser from "./components/ActiveUser.vue";
import UserData from "./components/UserData.vue";


const app = createApp(App);

app.component("active-user", ActiveUser);
app.component("user-data", UserData);

app.mount('#app')

// Task 1: 
// Add two components to the app: 
// An ActiveUser component and an UserData component
// ActiveUser should output a username (h2) and age (h3)
// UserData should output two input fields => for name and age
// Optional: Add styling of your choice

// Task 2: Output both components side-by-side in your main App template

// Task 3: Add user data and ensure it contains a name and age
// User data should be output in ActiveUser
// It should be updated via the UserData component

 08 - component communication/cmp-communication-assignment-solution/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 08 - component communication/cmp-communication-assignment-solution/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 08 - component communication/cmp-communication-assignment-solution/.gitignore

New file
@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 08 - component communication/cmp-communication-assignment-solution/HOW-TO-USE.pdf

Binary files differ

 08 - component communication/cmp-communication-assignment-solution/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 08 - component communication/cmp-communication-assignment-solution/package.json

New file
@@ -0,0 +1,23 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

 08 - component communication/cmp-communication-assignment-solution/public/favicon.ico

 08 - component communication/cmp-communication-assignment-solution/public/index.html

New file
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 08 - component communication/cmp-communication-assignment-solution/src/App.vue

New file
@@ -0,0 +1,42 @@
<template>
  <div>
    <active-user :username="user.name" :userage="user.age"></active-user>
    <user-data @set-data="setUserData"></user-data>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "Max Schwarzmüller",
        age: 31,
      },
    };
  },
  methods: {
    setUserData(name, age) {
      this.user = {
        name: name,
        age: +age
      };
    }
  }
};
</script>


<style>
html {
  font-family: sans-serif;
}

section {
  margin: 2rem auto;
  max-width: 40rem;
  border-radius: 12px;
  border: 1px solid #ccc;
  padding: 1rem;
}
</style>

 08 - component communication/cmp-communication-assignment-solution/src/components/ActiveUser.vue

New file
@@ -0,0 +1,21 @@
<template>
  <section>
    <h2>{{ username }}</h2>
    <h3>{{ userage }} Years</h3>
  </section>
</template>

<script>
export default {
  props: {
    username: {
      type: String,
      required: true
    },
    userage: {
      type: Number,
      required: true
    }
  }
};
</script>

 08 - component communication/cmp-communication-assignment-solution/src/components/UserData.vue

New file
@@ -0,0 +1,26 @@
<template>
  <section>
    <form @submit.prevent="submitData">
      <input type="text" placeholder="Your name" v-model="enteredName" />
      <input type="text" placeholder="Your age" v-model="enteredAge" />
      <button>Set User Data</button>
    </form>
  </section>
</template>

<script>
export default {
  emits: ['set-data'],
  data() {
    return {
      enteredName: "",
      enteredAge: "",
    };
  },
  methods: {
    submitData() {
      this.$emit('set-data', this.enteredName, this.enteredAge);
    }
  }
};
</script>

 08 - component communication/cmp-communication-assignment-solution/src/main.js

New file
@@ -0,0 +1,25 @@
import { createApp } from 'vue';

import ActiveUser from './components/ActiveUser.vue';
import UserData from './components/UserData.vue';
import App from './App.vue';

const app = createApp(App);

app.component('active-user', ActiveUser);
app.component('user-data', UserData);

app.mount('#app');

// Task 1:
// Add two components to the app:
// An ActiveUser component and an UserData component
// ActiveUser should output a username (h2) and age (h3)
// UserData should output two input fields => for name and age
// Optional: Add styling of your choice

// Task 2: Output both components side-by-side in your main App template

// Task 3: Add user data and ensure it contains a name and age
// User data should be output in ActiveUser
// It should be updated via the UserData component

 09 - deeper into components/cmp-adv-01-starting-setup/.browserslistrc

New file
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

 09 - deeper into components/cmp-adv-01-starting-setup/.eslintrc.js

New file
@@ -0,0 +1,17 @@
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

 09 - deeper into components/cmp-adv-01-starting-setup/.gitignore

New file
@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 09 - deeper into components/cmp-adv-01-starting-setup/HOW-TO-USE.pdf

Binary files differ

 09 - deeper into components/cmp-adv-01-starting-setup/babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 09 - deeper into components/cmp-adv-01-starting-setup/package-lock.json

New file
Diff too large

 09 - deeper into components/cmp-adv-01-starting-setup/package.json

New file
@@ -0,0 +1,23 @@
{
  "name": "vue-first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

 09 - deeper into components/cmp-adv-01-starting-setup/public/favicon.ico

 09 - deeper into components/cmp-adv-01-starting-setup/public/index.html

New file
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 09 - deeper into components/cmp-adv-01-starting-setup/src/App.vue

New file
@@ -0,0 +1,46 @@
<template>
  <div>
    <the-header></the-header>
    <badge-list></badge-list>
    <user-info
      :full-name="activeUser.name"
      :info-text="activeUser.description"
      :role="activeUser.role"
    ></user-info>
  </div>
</template>

<script>
import TheHeader from './components/TheHeader.vue';
import BadgeList from './components/BadgeList.vue';
import UserInfo from './components/UserInfo.vue';

export default {
  components: {
    // 'the-header': TheHeader,
    // TheHeader: TheHeader,
    TheHeader,
    BadgeList,
    UserInfo
  },
  data() {
    return {
      activeUser: {
        name: 'Maximilian Schwarzmüller',
        description: 'Site owner and admin',
        role: 'admin',
      },
    };
  },
};
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: 0;
}
</style>

 09 - deeper into components/cmp-adv-01-starting-setup/src/components/BadgeList.vue

New file
@@ -0,0 +1,39 @@
<template>
  <section>
    <h2>Available Badges</h2>
    <ul>
      <li>
        <base-badge type="admin" caption="ADMIN"></base-badge>
      </li>
      <li>
        <base-badge type="author" caption="AUTHOR"></base-badge>
      </li>
    </ul>
  </section>
</template>

<style scoped>
section {
  margin: 2rem auto;
  max-width: 30rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 1rem;
}

section h2 {
  margin: 0.5rem 0;
  color: #3a3a3a;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

li {
  margin-right: 1rem;
}
</style>

 09 - deeper into components/cmp-adv-01-starting-setup/src/components/BaseBadge.vue

New file
@@ -0,0 +1,37 @@
<template>
  <span class="badge" :class="classes">{{ caption }}</span>
</template>

<script>
export default {
  props: ['type', 'caption'],
  computed: {
    classes() {
      return {
        'badge--admin': this.type === 'admin',
        'badge--author': this.type === 'author',
      };
    },
  },
};
</script>

<style scoped>
.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  background-color: #ccc;
  color: #2e2e2e;
}

.badge--admin {
  background-color: #810036;
  color: white;
}

.badge--author {
  background-color: #002c8a;
  color: white;
}
</style>

 09 - deeper into components/cmp-adv-01-starting-setup/src/components/TheHeader.vue

New file
@@ -0,0 +1,21 @@
<template>
  <header>
    <h1>More on Vue Components</h1>
  </header>
</template>

<style scoped>
  header {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #14005e;
  }

  header h1 {
    color: white;
    margin: 0;
  }
</style>

 09 - deeper into components/cmp-adv-01-starting-setup/src/components/UserInfo.vue

New file
@@ -0,0 +1,31 @@
<template>
  <section>
    <header>
      <h3>{{ fullName }}</h3>
      <base-badge :type="role" :caption="role.toUpperCase()"></base-badge>
    </header>
    <p>{{ infoText }}</p>
  </section>
</template>

<script>
export default {
  props: ['fullName', 'infoText', 'role'],
};
</script>

<style scoped>
section {
  margin: 2rem auto;
  max-width: 30rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 1rem;
}

section header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

 09 - deeper into components/cmp-adv-01-starting-setup/src/main.js

New file
@@ -0,0 +1,11 @@
import { createApp } from 'vue';

import App from './App.vue';
import BaseBadge from './components/BaseBadge.vue';


const app = createApp(App);

app.component('base-badge', BaseBadge);

app.mount('#app');