vue-polkadot UI LibrariesGlobals

vue-polkadot UI Libraries

vue-settings

Vuex module for polkadot.js settings

Installation

npm install --save @vue-polkadot/vue-settings

State Props

Name Description
apiUrl Selected Url
i18nLang Selected language
locking Selected Locking
prefix Prefix
uiMode UI Mode
uiTheme UI Theme
avaibleOptions Object of all avaible options

Mutations

Name Description Params Types
setSettings Set settings settings SettingsStruct

Getters

Name Description Returns
availableNodes List of Nodes Option[]
availableLanguages List of Languages Option[]
availableCryptos List of Cryptographic modes Option[]
availableLocking List of Locking Option[]
availablePrefixes List of Prefixes Option[]
availableUiModes List of UI Modes Option[]
availableUiThemes List of UI Themes Option[]
getSettings Object of all avaible options SettingsStruct

Usage Examples

import SettingModule to your store as module

import Vue from 'vue'
import Vuex from 'vuex'
import SettingModule from '@vue-polkadot/vue-settings'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    setting: SettingModule,
  },
})
1
2
3
4
5
6
7
8
9
10
11

now you can use getters and actions inside your component (Using Vue with typescript)

<template>
  <div>
    <div v-for="option in options">
      <span>{{option.value}}</span>
      <span>{{option.text}}</span>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  @Component
  export default class App extends Vue {
    // Getter is like computed
    get options(): Option[] {
      return this.$store.getters.availableNodes
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20