Как динамически вставлять скрипты в body nuxt2?

от
prokoding.ru > Vue.js > Как динамически вставлять скрипты в body nuxt2?

Во фреймворке Nuxt.js существует несколько способов динамически вставлять скрипты в тег <body>.

1. **Использование плагина**:

Один из способов добавления скриптов в <body> - это использование плагинов. Для этого создайте папку plugins в корне проекта Nuxt.js и добавьте новый файл, например, dynamicScript.js. В этом файле определите ваш скрипт, например:

const script = document.createElement('script');
script.src = 'https://example.com/script.js';
document.body.appendChild(script);

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

export default {
  plugins: [
    { src: '~/plugins/dynamicScript.js', mode: 'client' }
  ]
}

Теперь ваш скрипт будет динамически добавлен на клиентской стороне.

2. **Использование Middleware**:

Еще один способ - использование middleware. Создайте файл middleware, например, dynamicScriptMiddleware.js:

export default function ({ route, isClient }) {
  if (isClient) {
    const script = document.createElement('script');
    script.src = 'https://example.com/script.js';
    document.body.appendChild(script);
  }
}

Зарегистрируйте middleware в файле nuxt.config.js:

export default {
  router: {
    middleware: 'dynamicScriptMiddleware'
  }
}

Теперь ваш скрипт будет добавляться при каждой смене маршрута (route).

3. **Использование mounted в компонентах**:

Вы также можете динамически добавить скрипты, используя хуки жизненного цикла компонентов Vue.js. Добавьте скрипт в метод mounted компонента:

export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://example.com/script.js';
    document.body.appendChild(script);
  }
}

Выберите подходящий способ в зависимости от вашего случая использования. Каждый из этих методов предоставляет возможность динамически добавлять скрипты в <body> при разработке с использованием Nuxt.js. Не забудьте следить за безопасностью при вставке внешних скриптов на ваш сайт!