[nuxt] Change app.vue to app.vine.ts

[angelhdzdev]

Hello, nice library!

Loving the syntax.

How can I convert app.vue to app.vine.ts in Nuxt? I tried many things from the docs and there's seems to be no way to change that.
So what I'm doing is importing app.vine.ts in app.vue and then <App/>. Thanks.

[wzc520pyfm]

app.vue is the default file for nuxt applications, and you're doing it right. Next, let me try to use app.vine.ts as the default file.

[angelhdzdev]

Update

Not the solution I expected but this works:

nuxt.config.ts

function vinePages(pages: NuxtPage[]) {
  pages.forEach(page => {
    if (page.file?.endsWith('.vine.ts')) {
      let path = page.path
      page.path = path.replace('.vine', '')
      page.path = page.path === '/index' ? '/' : page.path;
      consola.info(`Vine Nuxt Page renamed from ${path} to ${page.path}`)
    }
  })
}

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      vinePages(pages)
    },
  },
  

src/
  app/
    pages/
      auth/
         register.vine.ts
      index.vine.ts

This is because when Nuxt scans files for pages, it uses the filename as the route path, so index.vine would end being /index.vine.

I went ahead and made a Nuxt module:

function addVinePages(pages: NuxtPage[]) {
  pages.forEach((page: NuxtPage) => {
    if (page.file?.endsWith('.vine.ts')) {
      const path = page.path 
      page.path = path.replace('.vine', '')
      page.path = page.path === '/index' ? '/' : page.path;
      consola.info(`Vine Nuxt Page renamed from ${path} to ${page.path}`)
    }
  })
}

function addVineMacros(options: ModuleOptions) {
  const defaultTsConfig = {
      tsConfig: {
        compilerOptions: {
          types: ['vue-vine/macros']
        }
      }
  } as const 

  options.typescript = {
    ...defaultTsConfig,
    ...options.typescript,
    tsConfig: {
      ...defaultTsConfig.tsConfig,
      ...options.typescript?.tsConfig,
      compilerOptions: {
        ...defaultTsConfig.tsConfig.compilerOptions,
        ...options.typescript?.tsConfig?.compilerOptions,
        types: Array.isArray(options.typescript?.tsConfig?.compilerOptions?.types)
          ? [...new Set([...options.typescript.tsConfig.compilerOptions.types, 'vue-vine/macros'])]
          : defaultTsConfig.tsConfig.compilerOptions.types,
      },
    },
  }
}

export default defineNuxtModule({
  meta: {
    name: 'nuxt-vine',
  },
  async setup(options, nuxt) {
    addVineMacros(options)
    addVitePlugin(VineVitePlugin() as Plugin)
    
    nuxt.hook('pages:extend', (pages) => {
      addVinePages(pages)
    })
  }
})

[ShenQingchuan]

As Vue Vine 's author, I personally recommend you not to investigate this too much further.😊

Don't worry, I will explain step by step why I say this.

Before Vue Vine is fully adopted as a kind of standard solution by the official Vue team, we have been committed to developing a non-intrusive solution. This means that we do not intend for you to completely abandon SFC or find it uncomfortable or difficult to use Vine in solutions that are already based on SFC.

This perspective is very important to us.

If Nuxt's entry file is app.vue and routes currently require a .vue file, then let them have their way.
Vue Vine also does not want you to spend too much effort on engineering.

[angelhdzdev]

Yes I agree with that vision and I'm having fun with Vue Vine. Is like the perfect balance between React functional components and Vue SFCs and the directives. 🎉👋🤩💚🔥💯
Thank you for making this possible, for your time, and all the effort.

Lots of health, peace, and fun.

[ShenQingchuan]

I am very delighted that you are so enthusiastic about exploring the twists and mysteries involved.

You can also just simply ignore my suggestions, if there're any encouraging progress, we are more than willing to collaborate with you and incorporate your achievements into Vue Vine, acknowledging and credit your copyright.