What is Nervue?

Nervue - It is an intuitive and easy-to-use state manager for modern Vue applications. The library allows you to write clean and well-structured code that is easy to read and maintain. And due to the fact that the library is fully implemented in typescript, it has excellent typing support. Of course, all this is implemented with support for both the composition and the options API.

What does the name Nervue mean? The name is consonant with the word nerve. With this name, I wanted to convey an understanding of how about the vital system of your application, which will react as quickly as your nervous system reacts to what is happening around, of course in the good sense of the above 😃.

Basic example

Let's look at a small basic example of using Nervue:

import { defineStore } from 'nervue'

const useCounterStore = defineStore({
  id: 'counter',
  // defining the state
  state: () => ({
    count: 0
  }),
  // defining the actions
  actions: {
    increment(){
      this.count += 1
    }
  }
})

Somewhere in another file:

<script lang="ts">
  import { defineComponent } from 'vue'
  import { useCounterStore } from './store/counter-store.ts'

  export default defineComponent({
    setup(){
      const store = useCounterStore()
      // destructurization can be applied,
      // actions will not lose context.
      const { increment } = store

      return {
        store,
        increment
      }
    }
  })
</script>
<template>
  <div class="counter-block">
    <div class="counter-display">{{ store.count }}</div>
    <button @click="increment">up</button>
  </div>
</template>

And this basic local example, in principle, will be enough to organize the store of your reactive application. Interesting? Well, then let's move on.

info

Next, you will learn more about the library's capabilities.