This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Nuxt 3 composable providing reactive variables | |
regarding current breakpoint status. | |
--------------------------------------------- | |
Usage: | |
const { current, min, max } = useBreakpoints() | |
// returns current breakpoint | |
console.log(current.value) // e.g. 'md' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const useStoryRoutes = () => { | |
type StoryRoute = { | |
storyPath: string // The backend-storyblok-path of the story. | |
uuid: string // The uuid of the story. | |
localeTitles: LocalizedText | |
localePaths: LocalizedText | |
} | |
const pageTypes = 'page,news-article' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Provider to use the old storyblok image service v1 | |
with the nuxt/image package. | |
Why use v1 instead of the new v2? | |
Because v2 has serious problems with CDN caching, | |
with cloudfront CDN cache invalidating every day | |
instead of 1 year. This leads to response times | |
of up to multiple seconds due to re-generation | |
of the image service. Sadly, Storyblok has not yet |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Nuxt 3 Plugin providing directives and helpers | |
to convert line breaks to <br>, <p> or arrays. | |
--------------------------------------------- | |
Usage as directives (WARNING: can lead to XSS attack!): | |
<div v-nl2br="string" /> | |
<div v-nl2p="string" /> | |
Usage as helper in script setup: | |
const { $nl2array, $nl2br, $nl2p } = useNuxtApp() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Nuxt 3 Plugin to detect bots | |
--------------------------------------------- | |
Usage as helper in script setup: | |
const { $isBot } = useNuxtApp() | |
const isBot = $isBot() | |
Usage as helper in template: | |
<div v-if="$isBot()"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Nuxt 3 Plugin providing helpers to convert anything | |
to kebap-case, snake_case, camelCase or PascalCase. | |
--------------------------------------------------- | |
Usage as helper in script setup: | |
const {$toKebabCase, $toSnakeCase, $toCamelCase, $toPascalCase} = useNuxtApp() | |
console.log($toKebabCase('My String')) // Outputs: my-string | |
console.log($toSnakeCase('My String')) // Outputs: my_string | |
console.log($toCamelCase('My String')) // Outputs: myString |