Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove TIP tags from README_BASE.md #10

Merged
merged 2 commits into from
Jul 30, 2024
Merged

Remove TIP tags from README_BASE.md #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08b7a67
Remove TIP tags from README_BASE.md
szymonSys Jul 3, 2024
8f1c65e
Remove one # from REAMDE_BASE titles
szymonSys Jul 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 27 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,7 @@ If you want your nonce to be passed to the script, pass it as the third argument

Piwik PRO container will be initialized under the hood by `@piwikpro/nuxt-piwik-pro` module itself. Module also inject client-only plugin to Nuxt application instance which allow you to use all Piwik PRO services globally as a part of Nuxt context returned from `useNuxtApp()` composable as a `$piwikPRO`.

> [!IMPORTANT]
> Remember that Piwik PRO is a client-only library. This means you won't have access to any of its services on the server side.
###### Remember that Piwik PRO is a client-only library. This means you won't have access to any of its services on the server side.

```ts
// In any component or other part of application code
Expand All @@ -79,32 +78,34 @@ To use Piwik PRO services safety, you can import `usePiwikPro()` from `'@piwikpr
// In any component or other part of application code
import { usePiwikPro } from "@piwikpro/nuxt-piwik-pro/composables";
// callback can be sync or async function
const userId = await usePiwikPro(({ PageViews, GoalConversions, UserManagement }) => {
PageViews.trackPageView();
GoalConversions.trackGoal(1, 100);
return UserManagement.getUserId();
});
const userId = await usePiwikPro(
({ PageViews, GoalConversions, UserManagement }) => {
PageViews.trackPageView();
GoalConversions.trackGoal(1, 100);
return UserManagement.getUserId();
}
);
```

> [!TIP]
>
> ###### export `usePiwikPro()` as a Nuxt composable
>
> To make this composable globally available, create `.ts` file in `/composables` directory and export `usePiwikPro()` from `'@piwikpro/nuxt-piwik-pro/composables'`.
>
> ```ts
> // composables/usePiwikPro.ts
> export { usePiwikPro } from "@piwikpro/nuxt-piwik-pro/composables";
> ```
>
> ```ts
> // In any component or other part of application code
> const userId = await usePiwikPro(({ PageViews, GoalConversions, UserManagement }) => {
> PageViews.trackPageView();
> GoalConversions.trackGoal(1, 100);
> return UserManagement.getUserId();
> });
> ```
###### export `usePiwikPro()` as a Nuxt composable

To make this composable globally available, create `.ts` file in `/composables` directory and export `usePiwikPro()` from `'@piwikpro/nuxt-piwik-pro/composables'`.

```ts
// composables/usePiwikPro.ts
export { usePiwikPro } from "@piwikpro/nuxt-piwik-pro/composables";
```

```ts
// In any component or other part of application code
const userId = await usePiwikPro(
({ PageViews, GoalConversions, UserManagement }) => {
PageViews.trackPageView();
GoalConversions.trackGoal(1, 100);
return UserManagement.getUserId();
}
);
```

##### Usage with `<ClientOnly/>` Nuxt component

Expand Down
53 changes: 27 additions & 26 deletions docs/README_BASE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,7 @@ If you want your nonce to be passed to the script, pass it as the third argument

Piwik PRO container will be initialized under the hood by `@piwikpro/nuxt-piwik-pro` module itself. Module also inject client-only plugin to Nuxt application instance which allow you to use all Piwik PRO services globally as a part of Nuxt context returned from `useNuxtApp()` composable as a `$piwikPRO`.

> [!IMPORTANT]
> Remember that Piwik PRO is a client-only library. This means you won't have access to any of its services on the server side.
##### Remember that Piwik PRO is a client-only library. This means you won't have access to any of its services on the server side.

```ts
// In any component or other part of application code
Expand All @@ -75,32 +74,34 @@ To use Piwik PRO services safety, you can import `usePiwikPro()` from `'@piwikpr
// In any component or other part of application code
import { usePiwikPro } from "@piwikpro/nuxt-piwik-pro/composables";
// callback can be sync or async function
const userId = await usePiwikPro(({ PageViews, GoalConversions, UserManagement }) => {
PageViews.trackPageView();
GoalConversions.trackGoal(1, 100);
return UserManagement.getUserId();
});
const userId = await usePiwikPro(
({ PageViews, GoalConversions, UserManagement }) => {
PageViews.trackPageView();
GoalConversions.trackGoal(1, 100);
return UserManagement.getUserId();
}
);
```

> [!TIP]
>
> ###### export `usePiwikPro()` as a Nuxt composable
>
> To make this composable globally available, create `.ts` file in `/composables` directory and export `usePiwikPro()` from `'@piwikpro/nuxt-piwik-pro/composables'`.
>
> ```ts
> // composables/usePiwikPro.ts
> export { usePiwikPro } from "@piwikpro/nuxt-piwik-pro/composables";
> ```
>
> ```ts
> // In any component or other part of application code
> const userId = await usePiwikPro(({ PageViews, GoalConversions, UserManagement }) => {
> PageViews.trackPageView();
> GoalConversions.trackGoal(1, 100);
> return UserManagement.getUserId();
> });
> ```
##### export `usePiwikPro()` as a Nuxt composable

To make this composable globally available, create `.ts` file in `/composables` directory and export `usePiwikPro()` from `'@piwikpro/nuxt-piwik-pro/composables'`.

```ts
// composables/usePiwikPro.ts
export { usePiwikPro } from "@piwikpro/nuxt-piwik-pro/composables";
```

```ts
// In any component or other part of application code
const userId = await usePiwikPro(
({ PageViews, GoalConversions, UserManagement }) => {
PageViews.trackPageView();
GoalConversions.trackGoal(1, 100);
return UserManagement.getUserId();
}
);
```

#### Usage with `<ClientOnly/>` Nuxt component

Expand Down
Loading