fix(nuxt-module): Fixes nuxt pages

[angelhdzmultimedia]

• Fixes nuxt pages.
• Added consola : ^3.4.0 to show information about Vue Vine & SFC pages added.

[netlify]

✅ Deploy Preview for vue-vine ready!

Name	Link
🔨 Latest commit	78c14c2
🔍 Latest deploy log	https://app.netlify.com/sites/vue-vine/deploys/67b416fc196fd20008f69400
😎 Deploy Preview	https://deploy-preview-211--vue-vine.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ShenQingchuan]

@angelhdzdev

Thanks for making this amazing contribution! I'd like to merge this but I'm also aware that you may have some further changes ...

I've noticed that you're willing to add an option pages: true (or false) to toggle this Nuxt module for processing page features, but I don't really understand why you want to put those .vine.ts pages under path /vine:excluded, what does that mean?

[angelhdzmultimedia]

@angelhdzdev

Thanks for making this amazing contribution! I'd like to merge this but I'm also aware that you may have some further changes ...

I've noticed that you're willing to add an option pages: true (or false) to toggle this Nuxt module for processing page features, but I don't really understand why you want to put those .vine.ts pages under path /vine:excluded, what does that mean?

Thank you a lot for the warm welcome!

About hiding the routes behind /vine:excluded, yeah, I'm sorry for adding that confusion.
This was something I desperately did at the last moment, because splicing the .vine pages from the array didn't work at first.

I realized that because I deleted all Vine pages when pages: false, including pages/index.vine.ts, got a 404 error because the pages directory was left empty, in other words there were no routes for the Vue Router. So what I need to do is, add a warning when pages: false and the pages array ends up being empty of pages, to remind the user to delete the pages directory if it's empty to avoid the 404 error. Something like "Warning: Vine Pages where disabled and no Nuxt pages where found. Remove pages directory or set pages: false in Nuxt Config to disable routing".

Motivation of pages: boolean

The motivation for adding pages: boolean module option is to enable or disable the inclusion of Nuxt pages that are Vine because of the philosophy of Vine of being "another style to write Vue" and "not to impose it", so the user can have .vue pages along side of .vine.ts pages, or totally disable Vine Nuxt pages and only have Vine components.

If we add this feature, then I also added the useVueVineNuxt (or just useVueVine if there are not plans to add an utility like this in a non Nuxt project) utility, that exposes the nuxt module options, in this case pages: boolean for conditional rendering of Vine pages.

This option is the equivalent of pages: boolean of Nuxt Config to enable/disable Nuxt pages, but for Vine pages.

[ShenQingchuan]

Thanks for your detailed description.

So you mean:

in Vine Nuxt module config

• pages: true = if there's pages/index.vine.ts as Nuxt pages "/" route
• pages: false = if there's pages/index.vine.ts, set it to route "/vine:excluded/" to hide it, and print a warning.

Do I misunderstand anything?
I think this is a very good suggestion!

[angelhdzmultimedia]

Yes you understood it very well. With the difference that we do not have to exclude the Vine pages behind /vine:excluded path anymore. We can now simply splice the Vine pages from the pages array. pages.splice(pages.indexOf(page), 1).

Example:

 vueVineNuxtModule: {
    pages: true,
  }

 vueVineNuxtModule: {
    pages: false,
  }

And added a new option that was like the next logical step, for the users who does not wish to see logs:

export interface ModuleOptions {
  /**
   * Enables or disables Vue Vine pages.
   * 
   * If true, pages will be added.
   * If false, pages will be removed.
   * @default true
   */
  pages?: boolean
  /**
   * Enables or disables Vue Vine logs and warnings.
   * 
   * @default true
   */
  logging?: boolean
}

And later of course we add pages to the playground and the tests, which I will need help with.

Full code

import type { NuxtPage } from '@nuxt/schema'
import type { PluginOption } from 'vite'
import { defineNuxtModule } from '@nuxt/kit'
import { VineVitePlugin } from 'vue-vine/vite'
import { consola } from 'consola'

// Module options TypeScript interface definition
export interface ModuleOptions {
  /**
   * Enables or disables Vue Vine pages.
   * 
   * If true, pages will be added.
   * If false, pages will be removed.
   * @default true
   */
  pages?: boolean
  /**
   * Enables or disables Vue Vine logs and warnings.
   * 
   * @default true
   */
  logging?: boolean
}

function addPages(pages: NuxtPage[], logging?: boolean) {
  const count = {sfc: 0, vine: 0} 
  for (const page of pages) {
    if (page.file?.endsWith('vine.ts')) {
      page.path = page.path.replace('.vine', '')
      page.path = page.path === '/index' ? '/' : page.path

      count.vine += 1
    } else if (page.file?.endsWith('.vue')) {
      count.sfc += 1
    }
  }
  logging && consola.info(`[Vue Vine]: Vine pages enabled.`)
  if (pages.length) {
    logging && consola.success(`[Vue Vine]: Available pages - Vine (${count.vine}) Vue (${count.sfc})`)
  } else {
    logging && consola.success(`[Vue Vine]: No pages available.`)
  }
}

function removePages(pages: NuxtPage[], logging?: boolean) {
  const count = {sfc: 0} 
  for (const page of pages) {
    if (page.file?.endsWith('.vine.ts')) {
      pages.splice(pages.indexOf(page), 1)
    } else if (page.file?.endsWith('.vue')) {
      count.sfc += 1
    }
  }
  logging && consola.info(`[Vue Vine]: Vine pages disabled.`)
  if (!pages.find(page => page.path === '/')) {
    logging && consola.warn('[Vue Vine]: The index.vue page is missing. Please add it or disable Vue pages by setting `pages: false` in nuxt.config.ts.')
  }
  if (pages.length) {
    logging && consola.success(`[Vue Vine]: Available pages - Vue (${count.sfc})`)
  } else {
    logging && consola.success(`[Vue Vine]: No pages available.`)
  }
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: '@vue-vine/nuxt',
    configKey: 'vueVineNuxtModule',
    compatibility: {
      // Semver version of supported nuxt versions
      nuxt: '>=3.0.0',
    },
  },
  // Default configuration options of the Nuxt module
  defaults: {
    pages: true,
    logging: true,
  },
  setup(_options, _nuxt) {
    _nuxt.options.typescript.tsConfig ||= {}
    _nuxt.options.typescript.tsConfig.compilerOptions ||= {}
    const compilerOptions = _nuxt.options.typescript.tsConfig
      .compilerOptions

    compilerOptions.types ||= []
    compilerOptions.types.push('vue-vine/macros')

    _nuxt.hook('vite:extend', async ({ config }) => {
      config.plugins = config.plugins || []
      config.plugins.unshift(VineVitePlugin() as PluginOption)
    })

    _nuxt.hook('pages:extend', (pages) => {
      if (!_options.pages) {
        removePages(pages, _options.logging)
        return
      } 
      addPages(pages, _options.logging)
    })
  },
})

About the useVueVine utility

We can add this utility later, so that we can have access to the module's options.

const { pages } = useVueVine() // or useVueVineNuxt()

return vine`
   <span v-if="pages"  style="color: green;">Vine Pages Enabled</span>
   <span v-if="!pages" style="color: red;">Vine Pages Disabled</span>
`

[ShenQingchuan]

@angelhdzdev

Great and awesome !!! Those utility functions are so cool ~~
But maybe useVineNuxtOptions() ?

Would you mind open another PR for these new changes?
We really want to record every new feature in separated threads.