vue-navbar

easy and usable virtual navbar plugin for vue app.

Installation

@axon-js/vue-navbar is available on npm and js delivery (cdn)

CLI Setup

You can setup package as dependency in your project.

npm install @axon-js/vue-navbar
# or
yarn add @axon-js/vue-navbar
# or
pnpm add @axon-js/vue-navbar

CDN Setup

You can use package as cdn on your project.

# unpkg
<script src="https://unpkg.com/@axon-js/[email protected]/dist/index.js"></script>

# jsdelivr
<script src="https://cdn.jsdelivr.net/npm/@axon-js/[email protected]/dist/index.js"></script>

# minified version of jsdelivr
<script src="https://cdn.jsdelivr.net/npm/@axon-js/[email protected]/dist/index.min.js"></script>

Import to Project

You need import package and use as plugin in vue app.

CLI

import { createApp } from 'vue';
import App from './App.vue';

import vueNavbar from '@axon-js/vue-navbar'; # import plugin

const app = createApp(App);

app.use(vueNavbar); # use as plugin

app.mount('#app');

Import Styles

You need to navbar styles to complete your setup.

CLI

import { createApp } from 'vue';
import App from './App.vue';

import '@axon-js/vue-navbar/styles.css'; # import Styles

const app = createApp(App);

app.mount('#app');

Useage

You only use vue-navbar on the project.

# basic
<template>
    <vue-navbar />
</template>

vue navbar create next to the dom element or body. if you want to custom child of navbar you should use your component in the navbar tag.

# custom content
<template>
    <vue-navbar>
        <span>Cutsom Content</span> # or everything you want
    </vue-navbar>
</template>

License

MIT

Copyright (c) 2022-present axon-js community