Skip to main content

Using Nitrozen To Build User Interface

Steps to build a user interface

  1. Open a terminal and install the Nitrozen library.

    npm install @gofynd/nitrozen-vue
  2. Use NitrozenButton component inside your Vue app, with CSS and component import.

    <template>  <div id="app">    <img alt="Vue logo" src="./assets/logo.png">    <nitrozen-button :theme="'secondary'"  v-flat-btn>Click me</nitrozen-button>  </div></template>
    <script>import HelloWorld from './components/HelloWorld.vue'import { NitrozenButton } from "@gofynd/nitrozen-vue";
    export default {  name: 'App',  components: {    HelloWorld,    NitrozenButton  }}</script>
    <style>@import './../node_modules/@gofynd/nitrozen-vue/dist/nitrozen.css';
    #app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>
  1. Next, build your app.

    npm run buildnpm start
  2. Open http://localhost:3000 in your web browser, you should be able to see a Nitrozen standard button.