Nuxt•2mo ago

Beginner Nuxt Questions

Hey, I am a senior React/Next freelance developer. I am on the verge of creating a new business. and stumbled upon the idea to use Nuxt instead of Next. Most of the things became clear to me from the docs. but I do have some questions: Plugins: I want to use WorkOS for authentication, there is no OOTB SDK available, but there is a NodeJS SDK, is it a best practice to create a plugin using the Node SDK? i18n: Is there a standard i18n package or does most of the community use Nuxt i18n? Thanks in advance!

2 Replies

kapa.ai•2mo ago

Hi @Wesley Janse. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'd be happy to help you with your questions about Nuxt! Let's address them one by one: Plugins: For using the WorkOS NodeJS SDK in Nuxt, creating a plugin is indeed a good practice. Nuxt has a robust plugin system that allows you to extend the framework's functionality. According to the Nuxt documentation on plugins (https://nuxt.com/docs/guide/directory-structure/plugins), you can create a plugin by adding a file in the plugins/ directory. This plugin can then use the WorkOS NodeJS SDK to handle authentication. Here's how you might structure it:

// plugins/workos.js
import { WorkOS } from '@workos-inc/node';

export default defineNuxtPlugin((nuxtApp) => {
  const workos = new WorkOS(process.env.WORKOS_API_KEY);

  // Make WorkOS available in your Nuxt app
  return {
    provide: {
      workos: workos
    }
  }
})

// plugins/workos.js
import { WorkOS } from '@workos-inc/node';

export default defineNuxtPlugin((nuxtApp) => {
  const workos = new WorkOS(process.env.WORKOS_API_KEY);

  // Make WorkOS available in your Nuxt app
  return {
    provide: {
      workos: workos
    }
  }
})

You can then use this plugin throughout your Nuxt application. i18n: Regarding internationalization, the most commonly used and recommended package for Nuxt is indeed @nuxtjs/i18n. This is evident from the Nuxt documentation on modules (https://nuxt.com/docs/guide/concepts/modules), where it's mentioned as an example of a popular module. To use it, you would typically add it to your nuxt.config.ts file like this:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  // i18n configuration
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  // i18n configuration
})

However, it's worth noting that there have been some issues with recent updates. According to a Stack Overflow post (https://stackoverflow.com/questions/77330239), there were compatibility issues when updating to Nuxt 3.8.0 and i18n 8.0.0. The solution involved creating a separate i18n.config.ts file and referencing it in the Nuxt configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  // ...other config
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  // ...other config
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

For the most up-to-date information and best practices, I recommend checking the official Nuxt i18n documentation (https://i18n.nuxtjs.org/). I hope this helps you get started with Nuxt for your new business venture! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Beginner Nuxt Questions