nuxt3.js

which config will change the direction and language of html document in Nuxt 3?

I want to change my document direction and language, but don't want to do that with JS. how can I do that?

Is there any config for that? how to set document direction to RTL?

<!doctype html>
<html dir="rtl" lang="fa">
  <!-- another tags -->
</html>

Solution

  • Nuxt3 use @vueuse/head. You don't need to download, it's already in Nuxt3.

    It will be something like that:

    useHead({
    htmlAttrs: { dir: 'rtl', lang: 'fa' },
})

    Works well with SSR in Nuxt3.

    Also, you can hard code it in your nuxt.config.ts if you don't need more languages:

    export default defineNuxtConfig({
    app: {
        head: {
            htmlAttrs: { dir: 'rtl', lang: 'fa' },
        },
    },
})