open-index/open-npm huggingface dataset:
npm package: @nlo/eslint-config
Description: This package contains the eslint configuration that is used in verticals of NLO.
Latest version: 4.1.0

# Eslint configuration for front-end

This package contains the eslint configuration that is used in verticals of NLO.

It is intended to be used in the nuxt3 setup that we are using.

## Installation

Run `npm install @nlo/eslint-config`

Add the following to your .eslintrc file:

```json
{
	"extends": ["@nlo/eslint-config"]
}
```

## What this config includes

This configuration adds the rules that we need to setup a consistent front-end.
The included setup follows the nuxt3 best practices, while keeping prettier configuration possible.
npm package: @nlo/history-api-handler
Description: A lightweight vue component for handling javascript navigation using the browser History API.
Latest version: 1.1.12

# History api handler

A lightweight vue component for handling javascript navigation using the browser History API.

## Installation

You can install the package through NPM.

`npm install @nlo/history-api-handler`

## Usage

The history api handler package provides an extendable component that allows persisting state/view changes in the browser url. A use case for using this handler is for example in a page that has several modals. Opening these modals with certain state can be attached to a specific url and parsed on page load and vue mount.

To use it, import the component and extend your component and provide a routes array in the created hook of the vue instance.

```js
@Component
export default class SubscriptionEditor extends HistoryApiHandler {
	created() {
		this.routes = [
			{
				name: "overview",
				path: "/",
				action: () => {},
			},
			{
				name: "modal",
				path: "/modal",
				action: () => {
					this.$refs.modal.open();
				},
			},
		];
	}
}
```

A route requires a name, a path and an action. The action runs once the component is created and provides you with the means to open a modal for example or change the state of the page.

To change a route manually after the initial route is parsed, you can use the `pushRoute` function:

```js
this.pushRoute({ name: "modal" });
```

### Route params

It is also possible to pass dynamic route parameters to the route path that will be parsed and passed as an object in the `action` function. For example to open a modal with a certain id:

```js
this.routes = [
	{
		name: "modal-with-params",
		path: "/modal/:id",
		action: (params) => {
			if (params.id) {
				this.$refs.modal.open(params.id);
			}
		},
	},
];

this.pushRoute({ name: "modal", params: { id: "1" } });
```

### Query strings

Query strings if present in the path will be parsed and provided as a second argument to the `action` function:

```js
this.routes = [
	{
		name: "modal-with-query",
		path: "/modal",
		action: (params, query) => {
			if (query.id) {
				this.$refs.modal.open(query.id);
			}
		},
	},
];

this.pushRoute({ name: "modal", query: { id: "1" } });
```

### On leave hook

It is also possible to execute code before a route is switched:

```js
this.routes = [
	{
		name: "modal",
		path: "/modal",
		action: () => {
			this.$refs.modal.open();
		},
		onLeave: () => {
			this.$refs.modal.close();
		},
	},
];
```