Как создать глобальные переменные для клиента Nuxt?

В Nuxt.js можно создавать глобальные переменные для клиента в нескольких различных способах. Ниже приведены три примера самых распространенных методов.

1. Использование объекта context в файле nuxt.config.js:
В этом методе можно определить глобальные переменные, которые будут доступны на клиентской стороне через объект context во всех компонентах, страницах и макетах приложения. Например:

   export default {
     // ...
     context: {
       apiUrl: 'https://api.example.com',
       globalVariable: 'Hello, world!',
     },
     // ...
   }

Теперь вы можете использовать эти глобальные переменные в любом компоненте, используя context. Например:

   export default {
     mounted() {
       console.log(this.$nuxt.context.apiUrl); // Выводит: https://api.example.com
       console.log(this.$nuxt.context.globalVariable); // Выводит: Hello, world!
     },
   }

2. Использование плагина:
В этом методе вы можете создать плагин, который определяет глобальные переменные и регистрирует их на клиентской стороне. Создайте новый файл в каталоге plugins (например, globals.js) и определите свои глобальные переменные внутри файла. Например:

   const globals = {
     apiUrl: 'https://api.example.com',
     globalVariable: 'Hello, world!',
   };

   export default ({ app }, inject) => {
     inject('globals', globals);
   };

Затем зарегистрируйте этот плагин в файле nuxt.config.js:

   export default {
     // ...
     plugins: [
       '~/plugins/globals.js',
     ],
     // ...
   }

Теперь вы можете использовать глобальные переменные, добавив $ перед их именами, в любом компоненте. Например:

   export default {
     mounted() {
       console.log(this.$globals.apiUrl); // Выводит: https://api.example.com
       console.log(this.$globals.globalVariable); // Выводит: Hello, world!
     },
   }

3. Использование заголовков meta:
В этом методе переменные определяются в метаданных страницы и доступны на клиентской стороне. Например:

   export default {
     // ...
     head: {
       meta: [
         {
           hid: 'globals',
           name: 'globals',
           content: JSON.stringify({
             apiUrl: 'https://api.example.com',
             globalVariable: 'Hello, world!',
           }),
         },
       ],
     },
     // ...
   }

Теперь вы можете получить доступ к этим глобальным переменным на клиентской стороне, используя document.querySelector('meta[name=globals]').content. Например:

   export default {
     mounted() {
       const globals = JSON.parse(document.querySelector('meta[name=globals]').content);
       console.log(globals.apiUrl); // Выводит: https://api.example.com
       console.log(globals.globalVariable); // Выводит: Hello, world!
     },
   }

Таким образом, в Nuxt.js есть несколько способов создания глобальных переменных для клиента. Выберите тот, который лучше всего соответствует вашим потребностям и требованиям проекта.