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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay