Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-modules/partytown
Partytown integration for Nuxt. Run third-party scripts from a web worker.
https://github.com/nuxt-modules/partytown
nuxt nuxt-module partytown performance web-worker
Last synced: 27 days ago
JSON representation
Partytown integration for Nuxt. Run third-party scripts from a web worker.
- Host: GitHub
- URL: https://github.com/nuxt-modules/partytown
- Owner: nuxt-modules
- License: mit
- Created: 2022-02-03T10:58:05.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T08:10:56.000Z (9 months ago)
- Last Synced: 2024-04-14T08:35:36.778Z (9 months ago)
- Topics: nuxt, nuxt-module, partytown, performance, web-worker
- Language: TypeScript
- Homepage:
- Size: 2.45 MB
- Stars: 299
- Watchers: 3
- Forks: 8
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @nuxtjs/partytown
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]
> [Partytown](https://partytown.builder.io/) integration for [Nuxt](https://v3.nuxtjs.org)
## Features
- 👌 Zero-config required
- 🔥 Relocates resource intensive scripts into a web worker
- ⚡️ Speeds up your site
- 💯 Nuxt 3 and Nuxt Bridge support
## Quick setup
1. Install `@nuxtjs/partytown`!
```bash
npx nuxi@latest module add partytown
```
2. Add it to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
})
```
3. Add `type: 'text/partytown'` attribute to any scripts you want to be handled by partytown.
```vue
```
## Configuration
Partytown supports a number of options, which you can pass in your `nuxt.config.ts` file:
```js
export default defineNuxtConfig({
// ...
partytown: {
/**
* When `true`, Partytown scripts are not minified. See https://partytown.builder.io/configuration
* on how to enable more logging.
*
* @default true in development
*/
debug: boolean
/**
* Path (relative to your base URL) where the Partytown library should be served from.
*
* @default '~partytown'
*/
lib: string
// For other options, see https://partytown.builder.io/configuration
},
})
```
## Example Configurations
### Crisp
```js
export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['$crisp', '$crisp.push'],
},
app: {
head: {
script: [
// Insert your CRISP Script here e.g.:
{ innerHTML: 'window.$crisp = []; window.CRISP_WEBSITE_ID = "0000"' },
{ src: 'https://client.crisp.chat/l.js', async: true, type: 'text/partytown' },
],
},
},
})
```
### Google Tag Manager
```js
export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['dataLayer.push'],
},
app: {
head: {
script: [
// Insert your Google Tag Manager Script here
{ src: '-', async: true, type: 'text/partytown' },
],
},
},
})
```
### Plausible Analytics
```js
export default defineNuxtConfig({
modules: ['@nuxtjs/partytown'],
partytown: {
forward: ['$plausible', '$plausible.push'],
},
app: {
head: {
script: [
{ innerHTML: 'window.$plausible = [];' },
// Update this
{
src: 'https://plausible.io/js/script.js',
defer: true,
type: 'text/partytown',
'data-domain': 'your-domains',
},
],
},
},
})
```
## Development
- Run `yarn prepare` to generate type stubs.
- Use `yarn dev` to start [playground](./playground) in development mode.
## Licence
[MIT Licence](./LICENCE)
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/partytown/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/partytown
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/partytown.svg
[npm-downloads-href]: https://npm.chart.dev/@nuxtjs/partytown
[github-actions-ci-src]: https://github.com/nuxt-modules/partytown/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-modules/partytown/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-modules/partytown.svg
[codecov-href]: https://codecov.io/gh/nuxt-modules/partytown
[license-src]: https://img.shields.io/npm/l/@nuxtjs/partytown.svg
[license-href]: https://npmjs.com/package/@nuxtjs/partytown