Navbar in Bulma display incorrectly?

[manhcntt21]

This is about Bulma | the Docs.

Overview of the problem

I'm using Bulma version [1.0.0] and [0.9.4]
My browser is: Chrome

Description

I want to add navbar bulma to my first page, but I don't know why it move on center of page like below

Steps to Reproduce

1. I followed official documents
2. import to project

<script setup>
import ViewNotes from '@/views/ViewNotes.vue'
import ViewStats from '@/views/ViewStats.vue'
import NavBar from '@/components/layout/NavBar.vue'
</script>

<template>
  <nav-bar></nav-bar>
  <router-view />
</template>

<style>
@import 'bulma/css/bulma.css';
</style>

3. run project
   npm run dev

Expected behavior

Navbar component should display on top webpage. This is all my code

[jrnvgt]

You've imported Bulma, but you are not using any of its classes. There is also no <nav-bar> tag in HTML and the tag you are looking for is <nav>.

Full example: <nav class="navbar" role="navigation" aria-label="main navigation">.

More info on how to structure your navbar can be found in the docs you referred to.