Using Vue Plugins
This page provides an overview of the currently supported Vue plugins that work with NativeScript-Vue.
Vue Router
Currently, integration with Vue Router is unsupported. Until the team resolves the issue, please use manual routing.
Pinia
Pinia is a state management pattern and library. It serves as a store for all the components in an app and implements rules to ensure that state is mutated in a predictable fashion.
Install the plugin
Install Pinia as you would normally in your Vue.js app. With npm, for example:
npm install --save pinia
The most recent version of Pinia will be added to your package.json
.
Import the plugin
Open your app entry file (likely app.js
, main.js
or app.ts
) and add the following line at the top:
import {createPinia} from "pinia";
const pinia = createPinia();
createApp(Main).use(pinia).start();
Now you can use Pinia to manage the state of your mobile app, similar to how you would use it in a standard Vue web app.
Usage: Create a store
You need to create a new constant to store your state and invoke Pinia API calls. You can do that in the app entry file after the creation of the Vue instance or in a separate folder (for example, /store
).
In the following example, a simple store constant includes the state of a counter and tracks its changes:
import { defineStore } from "pinia";
export const counterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
Usage: Use the store
Now you can manage state by calling the store you just created. In the following example, the app tracks the count value as you press a '+' or '-' button. Note that you don't manipulate the state itself, but call actions to increment and decrement its value.
<script lang="ts" setup>
import { computed } from 'nativescript-vue';
import { counterStore } from '~/store/counter';
import { StackLayout } from '@nativescript/core';
const store = counterStore();
const count = computed(() => store.count);
</script>
<template>
<Page>
<ScrollView>
<StackLayout>
<Button @tap="store.increment()" text="+" />
<Button @tap="store.decrement()" text="-" />
<Label :text="count" />
</StackLayout>
</ScrollView>
</Page>
</template>
For more information about Pinia, see the Pinia documentation.
HMR Support
For HMR support please take a look at this article from Vladyslav Piskunov Implementing Hot Module Reload (HMR) for Pinia in NativeScript-Vue with Webpack 5