<template>
<div>
<h1>Hello! I'm {{ name }}.</h1>
<p>You can also call me {{ pronouns }}.</p>
<p>Currently, I'm learning {{ currentlyLearning }}.</p>
<h2>My Skills:</h2>
<ul>
<li v-for="skill in skills" :key="skill">{{ skill }}</li>
</ul>
<button @click="learnNewSkill('Nuxt.js')">Learn Nuxt.js</button>
</div>
</template>
<script>import { ref } from '@nuxtjs/composition-api';
export default {
setup() {
const name = ref('Kerim');
const pronouns = ref('He' || 'Him');
const currentlyLearning = ref('Nuxt.js');
const skills = ref([
'PHP',
'JavaScript',
'C#',
'VB',
'Git',
'Linux',
'Databases',
'REST APIs',
]);
const introduce = () => {
alert(`Hello! I'm ${name.value}. You can also call me ${pronouns.value}.`);
};
const learnNewSkill = (newSkill) => {
skills.value.push(newSkill);
alert(`I'm now learning ${newSkill}!`);
};
return {
name,
pronouns,
currentlyLearning,
skills,
introduce,
learnNewSkill,
};
},
};</script>
