Nuxt•4w ago

how to have a playground page in a nuxt layer

how to have a page in a nuxt layer just to test things out but not include it when used another nuxt app?

6 Replies

Hi @Felix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a playground page in a Nuxt layer that won't be included when used in another Nuxt app, you have a few options: Using the .playground folder Based on the knowledge sources, Nuxt layers have a special .playground folder that's designed for testing purposes:

// Base layer structure
base/
  .playground/  // For testing the layer
  nuxt.config.ts
  components/
  ...

// Base layer structure
base/
  .playground/  // For testing the layer
  nuxt.config.ts
  components/
  ...

As mentioned in the YouTube video about Nuxt Layers, the .playground folder is specifically designed for this purpose:

The .playground folder [is where] you can test your layer without having to create a separate project.

Nuxt 3: How to use Nuxt Layers to encapsulate your code Using <DevOnly> component Another approach is to wrap your playground/testing components with the <DevOnly> component. This ensures the content will only be rendered during development and not included in production builds:

<template>
  <DevOnly>
    <!-- Your playground component here -->
    <PlaygroundComponent />
  </DevOnly>
</template>

<template>
  <DevOnly>
    <!-- Your playground component here -->
    <PlaygroundComponent />
  </DevOnly>
</template>

The <DevOnly> component is specifically designed to "render components only during development" and "the content will not be included in production builds" as documented in the Nuxt docs. DevOnly Component Using a custom route with a module approach For more advanced cases, you could create a custom route that's only available in development mode. This approach was mentioned in a GitHub issue:

<script setup lang="ts">
// src/runtime/root.vue
import IsolatedPage from './page/isolated.vue'

const NuxtRoot = defineAsyncComponent(() => import('#build/_nuxt-root.mjs').then(c => c.default))

const nuxtApp = useNuxtApp()
const url = import.meta.server ? nuxtApp.ssrContext.url : window.location.pathname
</script>
<template>
  <Suspense v-if="url.startsWith('/__module__/')">
    <IsolatedPage />
  </Suspense>
  <NuxtRoot v-else />
</template>

<script setup lang="ts">
// src/runtime/root.vue
import IsolatedPage from './page/isolated.vue'

const NuxtRoot = defineAsyncComponent(() => import('#build/_nuxt-root.mjs').then(c => c.default))

const nuxtApp = useNuxtApp()
const url = import.meta.server ? nuxtApp.ssrContext.url : window.location.pathname
</script>
<template>
  <Suspense v-if="url.startsWith('/__module__/')">
    <IsolatedPage />
  </Suspense>
  <NuxtRoot v-else />
</template>

This approach allows you to have a completely isolated page that doesn't inherit from the user's app.vue. GitHub Issue: Allow injecting pages without inheriting from app.vue The simplest approach would be to use the .playground folder in your layer structure, as it's specifically designed for testing layers without affecting apps that use your layer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@223579303122567168> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

FelixOP•4w ago

@kapa.ai what goes into the .playground folder?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, the .playground folder in a Nuxt layer is essentially a complete Nuxt application that you can use to test your layer. From the YouTube video about Nuxt Layers, the .playground folder is specifically mentioned as a place "where you can test your layer without having to create a separate project" Nuxt 3: How to use Nuxt Layers to encapsulate your code. The .playground folder should contain the basic structure of a Nuxt application that extends your layer, including: 1. A nuxt.config.ts file that extends your layer 2. An app.vue file as the main entry point 3. Any other Nuxt application files you need for testing (pages, components, etc.) For example, your .playground folder might look like this:

base/
  .playground/
    nuxt.config.ts  // Extends the parent layer
    app.vue         // Main application entry
    pages/          // Test pages
    components/     // Test components
    ...
  nuxt.config.ts    // Your layer's config
  components/       // Your layer's components
  ...

base/
  .playground/
    nuxt.config.ts  // Extends the parent layer
    app.vue         // Main application entry
    pages/          // Test pages
    components/     // Test components
    ...
  nuxt.config.ts    // Your layer's config
  components/       // Your layer's components
  ...

The nuxt.config.ts inside the .playground folder would typically extend the parent layer:

export default defineNuxtConfig({
  extends: ['..'] // Extends the parent layer
})

export default defineNuxtConfig({
  extends: ['..'] // Extends the parent layer
})

This setup allows you to develop and test your layer in isolation before using it in other Nuxt applications. The .playground directory won't be included when other applications extend your layer. I hope this helps clarify what goes into the .playground folder! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@223579303122567168> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dwol•4w ago

The later template has a good example of this. https://nuxt.new/

nuxt.new

Kickstart your Nuxt project

Gaming

Programming

how to have a playground page in a nuxt layer

Did you find this page helpful?