Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ossphilippines/ns-vue-nami
Router companion for Nativescript-Vue's Manual Routing.
https://github.com/ossphilippines/ns-vue-nami
hacktoberfest javascript nativescript nativescript-plugin nativescript-vue vue vuejs vuejs2
Last synced: 1 day ago
JSON representation
Router companion for Nativescript-Vue's Manual Routing.
- Host: GitHub
- URL: https://github.com/ossphilippines/ns-vue-nami
- Owner: OSSPhilippines
- Created: 2018-10-19T13:47:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T10:16:03.000Z (almost 2 years ago)
- Last Synced: 2024-05-02T21:52:42.596Z (5 months ago)
- Topics: hacktoberfest, javascript, nativescript, nativescript-plugin, nativescript-vue, vue, vuejs, vuejs2
- Language: JavaScript
- Homepage:
- Size: 744 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ns-vue-nami [](https://circleci.com/gh/jofftiquez/ns-vue-nami) 
Router companion for Nativescript-Vue 2.0's Manual Routing.
Yep, that's her, Nami from One Piece. Why? Coz she's a navigator.
## Installation
**npm**
`npm install ns-vue-nami`
**yarn**
`yarn add ns-vue-nami`
## Recommended Implementation
Create a `router` folder with an `index.js` file within your `app` folder.
```
app
|- components
|- router
|- index.js
```
**index.js**
```javascript
import Vue from 'nativescript-vue';
import NsVueNami from 'ns-vue-nami';
import login from '~/components/login';
import dashboard from '~/components/dashboard';
import isAuthenticated from 'some-authentication-module';
Vue.use(NsVueNami);
const vm = new Vue();
vm.$nami.authGuard((next) => {
if(isAuthenticated) {
next();
} else {
next('login');
}
});
// register all routes here.
vm.$nami.init({
routes: [
{
name: 'login',
component: login,
noAuth: true,
entry: !isAuthenticated
},
{
name: 'dashboard',
component: dashboard,
entry: isAuthenticated
}
]
});
```
**main.js**
Just invoke the router in your `main.js`.
```javascript
import '@babel/polyfill';
import entry from './router';
new Vue({
store,
render: h => h('frame', [h(entry)])
}).$start();
```
**Please note the import of the `babel/polyfill` above, this might be necessary to avoid this bug:
`NativeScript encountered a fatal error: ReferenceError: Can't find variable: regeneratorRuntime` you can install the polyfill by running `npm install --save-dev @babel/polyfill` and importing it as seen above.**
## Sample Usage
**From the template**
```vue
Go to foo
```
**From script**
```javascript
export default {
methods: {
someFunc() {
this.$nami.navigate('bar');
}
}
}
```
## API
**.init()**
> Sets all the routable components across the whole app.
> Returns the entry component to be used in main.js as frame entry.
Router properties:
1. `name: String` - The component name of your choice.
2. `component: Vue component` - The vue component.
3. `noAuth: Boolean: default - false` - The component will NOT require authentication if set to true.
4. `entry: Boolean` - Set a particular component as entry point.
```javascript
import login from '~/components/login';
import dashboard from '~/components/dashboard';
vm.$nami.init({
routes: [
{
name: 'login',
component: login,
entry: true
},
{
name: 'dashboard',
component: dashboard
}
]
})
```
**.authGuard()**
> Will decide whether the component is routable or not based on authentication status.
```javascript
import Vue from 'nativescript-vue';
import NsVueNami from '../plugins/ns-vue-nami';
import login from '~/components/login';
import dashboard from '~/components/dashboard';
// Dummy authentication status.
const isAuthenticated = true;
Vue.use(NsVueNami);
const vm = new Vue();
vm.$nami.authGuard((next) => {
if(isAuthenticated) {
next();
} else {
next('login');
}
});
export default vm.$nami.init({
routes: [
{
name: 'login',
component: login,
noAuth: true,
entry: !isAuthenticated // login will be the entry if isAuthenticated is false
},
{
name: 'dashboard',
component: dashboard,
entry: isAuthenticated // dashboard will be the entry if isAuthenticated is true
}
]
});
```
**.register()**
> Adds a new route to the list of routes on the fly.
```javascript
import cat from '~/components/cat';
vm.$nami.register({name: 'cat', component: cat});
```
**.navigate()**
```javascript
// Basic
this.$nami.navigate('cat-component');
// With props
this.$nami.navigate('cat-component', {name: 'Kidlat', color: 'Black'});
```
```vue
View Cat
```
**.modal()**
> Just like `.navigate()` but shows the component on a modal.
```javascript
// Basic
this.$nami.modal('cat-component');
// With props
this.$nami.modal('cat-component', {name: 'Kidlat', color: 'Black'});
```
```vue
View Cat in a Modal
```
**.back()**
> Goes back to the previous component.
```javascript
this.$nami.back();
```
```vue
Go back
```