open-index/open-npm huggingface dataset:
npm package: @nlo/nuxt-application-insights
Description: AppInsights module for Nuxt3
Latest version: 2.4.0

# Nuxt package for application insights

This is a temporary package that we use until the official module is updated to support the latest version of application insights.

## Usage

Add this as a dependency

```
npm install @nlo/nuxt-application-insights
```

Add the module to your nuxt.config.ts

```
{
    modules: ['@nlo/nuxt-application-insights'],
}
```

## Environment variables

- `NUXT_PUBLIC_NLO_APPLICATION_INSIGHTS_SERVER_CONNECTION_STRING` The connection string for application insights (used for both server and client)

## Development

- Run `npm run dev:prepare` to generate type stubs.

### Running the playground

The playground is a Nuxt application that allows you to try out your feature within this repository.

- Use `npm run dev` to start [playground](./playground) in development mode.
npm package: @nlo/nuxt-common-base-application
Description: Nuxt3 layer for creating NLO Lottery websites
Latest version: 1.4.0

# NLO Nuxt common base application

This base nuxt application contains shared setup for creating and maintaining NLO lottery website applications in Nuxt.

This should only be included directly by lottery websites, so we can update @nlo/nuxt-common independently of this package.

## Features:

- Dictate nuxt version for verticals
- Add security headers

## Include in vertical

To include this nuxt layer into your own application, add it to the layers array in nuxt.config.ts, like so:

```typescript
export default defineNuxtConfig({
	extends: ['@nlo/nuxt-common-base-application'],
});
```

## Npm commands:

- `npm run lint` to run prettier and typescript checks
- `npm run test` to run unit tests
- `npm run dev` to run the nuxt application

## Environment variables

- `NUXT_REDIS_OPTIONS_BASE` The prefix of the key of the cache entries
- `NUXT_REDIS_OPTIONS_URL` The url to the redis instance
- `NUXT_REDIS_OPTIONS_TTL` The time to live of the cache entries
- `NUXT_ENABLE_REDIS_CACHE` Boolean indicating if redis should be enabled for page caching
- `NUXT_LRU_OPTIONS_MAX` Maximum number of LRU cache entries
- `NUXT_ENABLE_LRU_CACHE` Boolean indicating if LRU cache should be enabled for page caching

## Security headers

For applying the best practices around security headers, we use https://nuxt-security.vercel.app. Using a library forces us to work in a security-by-default way of working. Information about required security headers can be found here: https://loterij.atlassian.net/wiki/spaces/NLDT/pages/3571253310/Required+http+headers+security

These security headers are applied by default, but need to be adjusted per vertical. Primarily specifying which resource-type is allowed from what domain is required.

Example configuration to allow every type of resource from the Portal domain:

nuxt.config.ts

```Typescript
security: {
	headers: {
		contentSecurityPolicy: {
			'default-src': ['https://www.nederlandseloterij.nl'],
		},
	},
},
```

If you want to allow all resources from all domains, use the following example:

nuxt.config.ts

```Typescript
security: {
	headers: {
		contentSecurityPolicy: {
			'default-src': ['*'],
		},
	},
},
```

Note that these configurations are built-time only.
If you want to have run-time configuration (such as limit which domains are allowed), use the `NUXT_SECURITY_HEADERS_CONTENT_SECURITY_POLICY_DEFAULT_SRC` environment variable with the specified format:

```
[\"https://my-allowed-website.nl\",\"\'unsafe-inline\'\",\"\'unsafe-eval\'\",\"wss:\"]
```

This format is basically a string-array in escaped json format. but the single-quotes around unsafe-inline and unsafe-eval are required.

Note: For now we haven't added per-resource exclusion from nuxt-common since that would introduce a lot of configuration in every website.

For more details, see the website of the library.
npm package: @nlo/nuxt-storybook
Description: Nuxt 3 storybook integration for NLO websites
Latest version: 2.2.5

# Nuxt 3 storybook

Note: This code comes from https://github.com/hirotaka/storybook-addon-nuxt.
It was missing a few things we need specifically for NLO (custom plugins/composables), so this was the short way towards being able to start with storybook.
If a proper solution comes from the nuxt community or from the source repository, please replace this library with that solution.

Integration for NLO lottery websites.
This plugin replaces composables and plugins so that you can use components in storybook.

## Installation

Install storybook using:

```
npx storybook@latest init --type vue3 --builder vite
```

Install this npm module:

```
npm install --save-dev @nlo/nuxt-storybook
```

In your `.storybook/main.ts`, add the following import:

```
import { viteFinal } from '@nlo/nuxt-storybook';
```

And add it to the StorybookConfig like so:

```ts
const config: StorybookConfig = {
    ...,
    viteFinal
}
```

## Maintaining

For every plugin or composable that we need in our components that we want to show in Storybook, we need to add a mock in this repository.

Adding a composable mock is easy, add the name of the composable to the `stubbedComposables` array in index.ts.

You also want to add the actual mock to `composables.mjs`, like so:

```ts
export const useMyComposable = () => ({
	myProperty: 'Hello',
	myFunction: () => {},
});
```