Vuesax NavBar component failed to resolve component "vs-navbar-item"

Question

I am currently using Vue.js and the Vuesax framework to create a webapp. I have everything installed through NPM. I am able to create router links and router views to display the data on different pages, however when I attempt to import the Navbar to my main App.vue component all that shows up of the Navbar is the text, none of the colouring or styling appears. My IDE returns no errors, and the page otherwise loads perfectly. The only indication as to what is wrong is if i use my browsers inspect mode. I get three warnings there specifically related to components of the Navbar.

NavBar.vue

    <template>
    <div class="center examplex">
      <vs-navbar color="#7d33ff" text-white square center-collapsed v-model="active">
        <template #left>
        </template>
        <vs-navbar-item :active="active == 'guide'" id="guide">
          Guide
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'docs'" id="docs">
          Documents
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'components'" id="components">
          Components
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'license'" id="license">
          license
        </vs-navbar-item>
        <template #right>
          <vs-button color="#fff" flat >Login</vs-button>
          <vs-button color="#fff" border >Get Started</vs-button>
        </template>
      </vs-navbar>
      <div class="square">
        
      </div>
    </div>
  </template>

  <script>

  import 'vuesax/dist/vuesax.css'

  export default {
    data:() => ({
      active: 'guide'
    })
  }

  </script>

App.Vue

<template>
  <div id="nav">
    <NavBar></NavBar>
    <router-link :to="{ name: 'Home'}">
      Home
    </router-link>
    <router-link :to="{ name: 'About'}">
      About
    </router-link>
    <router-view />
    
  </div>

  
</template>


<script>
import NavBar from "./components/NavBar.vue";
export default {
  components: {
    NavBar
  }
}
</script>

<style>

</style>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Browser warnings

[Vue warn]: Failed to resolve component: vs-navbar-item
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NavBar> 
  at <App>

[Vue warn]: Failed to resolve component: vs-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NavBar> 
  at <App>

[Vue warn]: Failed to resolve component: vs-navbar
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NavBar> 
  at <App>

Any help would be greatly appreciated.