Is it possible to ignore a file only for production?

[Saunved]

There is a mechanism to ignore files in Nuxt by adding them to a .nuxtignore file. This is what I tried: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ignore/ However, this seems to disable the file during development too.

Is there a way to keep a file during development and disable it only for production?

[atinux]

What is the purpose of ignoring only for production?

[Saunved]

I will try to explain this as concisely as possible.

I want to incorporate Storybooking as part of our dev workflow. I tried using the nuxt-storybook module, but it's a real mess when trying to get it to work with Tailwind. You have to dig into Webpack and reconfigure things, and there are no good online resources to help with it. After struggling for a few hours, I tried using nuxt-stories which is a really good idea, but it doesn't quite fulfill my use case since it tries to do a lot of other things and is still a bit buggy. So I had to come up with a simple workflow that I could explain to new developers in a few minutes.

Workflow steps: (1) Create pages/components.vue. Add a sidebar section and a main section to the page. The sidebar will contain a list of all your components and the main section will show the one you've clicked on (2) Create a component in /components e.g. MyComponent (3) Add MyComponent to pages/components.vue

This is what it looks like on my company's website where I ran this experiment:

Example components.vue file

<template>
  <div id="components" class="overflow-hidden">
    <div class="grid grid-cols-4 relative">
      <div class="col-span-1 text-white border-r text-center pt-12 border-white overflow-y-scroll sticky top-0 nav min-h-screen">
        <p @click="selected = 0">
          MyComponent
        </p>
        <p @click="selected = 1">
          MyComponent2
        </p>
      </div>
      <div class="col-span-3 py-20 relative p-8">
        <MyComponent v-if="selected === 0" />
        <MyComponent2 v-if="selected === 1" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: 0
    }
  }
}
</script>

<style>
#components {
    background: #222;
}

.nav p {
    @apply pb-4;
    @apply cursor-pointer;
}
</style>

This is of course a very rough method, and I will refine it over time, but it gets the job done without any bells or whistles. As you can see, one would want to retain pages/components.vue during development and keep it off during production.

I am aware of tools that let you store components in the cloud and reuse them, but these are usually paid and the time required to onboard new developers or freelancers to a project rises due to the training aspect. I'd love to know if you have an alternative approach or an easier method.

Also, on a side note - I am a huge fan of Nuxt and I am in absolute awe of the work you and other collaborators have done on this project!

[danielroe]

A current workaround could be to have a folder called stories in your folder structure, and then use extendRoutes() to automatically add all Vue components in that folder, if in development.

[Saunved]

A current workaround could be to have a folder called stories in your folder structure, and then use extendRoutes() to automatically add all Vue components in that folder, if in development.

@danielroe Will this allow us to view each component in isolation (like with nuxt-storybook?) It's super helpful to be able to do that since it helps with testing in the early stages of the project and developers can keep track of what everyone is working on in a centralized location.

[VagnerDomingues]

so how it was @Saunved? were you able to use the extendRoutes()?