Using Nitrozen To Build User Interface

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

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.

   src/app.vue

   
   <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>

3. Next, build your app.

   npm run build
   npm start

4. Open http://localhost:3000 in your web browser, you should be able to see a Nitrozen standard button.