DEV Community

Cover image for VueJs for Beginner 2024 #VueJs Part 2 : Create, Import, and Use Component
KyDev
KyDev

Posted on • Edited on

1

VueJs for Beginner 2024 #VueJs Part 2 : Create, Import, and Use Component

Creating your first component


What is a Component?
Components are the building blocks of a Vue application. Each component has its own functionality and view, Components can be reused throughout the application. One example of a component is a navbar that can be accessed on different pages.

Creating a Basic Component

  • Create a new component file called HelloWorld.vue (you can change the file name if you want) in the components folder (create a new components folder if it doesn't already exist).

  • HelloWorld component:

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Enter fullscreen mode Exit fullscreen mode
  • import and use HelloWord component in App.vue
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

Now you should be able to see the HelloWorld component rendered in the App.vue component.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️