Untitled Project

script.vue

<script setup lang="tsx">
  import { ref } from 'vue';

  const name = 'Vue';
  const count = ref(0);
  const align = 'center';

  // define inline component
  function Greeting(props: {name: string}) {
    return <h1>Hello, { props.name }!</h1>
  }
</script>

<template>
  <div class="container">
    <Greeting :name="name" />
    <img class="logo" alt="logo" src="https://livecodes.io/livecodes/assets/templates/vue.svg" />
    <p>You clicked {{ count }} times.</p>
    <button @click="count++">Click me</button>
  </div>
</template>

<style scoped>
  .container,
  .container button {
    text-align: v-bind("align");
    font: 1em sans-serif;
  }
  .logo {
    width: 150px;
  }
</style>

Untitled_Project.md

Untitled Project

A project created by Lulzx on LiveCodes.