Как глобально вставить css код в nuxt только для одного роута?

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

Использование глобального CSS файла только для определенного роута:

Создайте CSS файл (например, myCustomStyles.css) и поместите его в директорию assets вашего Nuxt.js проекта.
Откройте nuxt.config.js файл в корне проекта.
В разделе css добавьте путь к вашему файлу CSS, используя формат массива:

     module.exports = {
       // ...
       css: [
         'assets/myCustomStyles.css'
       ],
       // ...
     }

Теперь ваш глобальный CSS файл будет применяться только для роутов, которые имеют доступ к этому файлу.

Использование scoped CSS модуля только для определенного роута:

Создайте CSS файл (например, myCustomStyles.module.css) и поместите его в директорию assets вашего Nuxt.js проекта.
В вашем компоненте, который связан с нужным роутом, импортируйте CSS файл и задайте классы с помощью scoped модификатора:

     <template>
       <div class="my-custom-styles">...</div>
     </template>
     
     <script>
     export default {
       // ...
     }
     </script>
     
     <style module>
     @import '@/assets/myCustomStyles.module.css';
     
     .my-custom-styles {
       /* Ваши стили здесь */
     }
     </style>

Scoped CSS модуль гарантирует, что стили применяются только к компоненту, к которому они относятся. Таким образом, глобальное влияние этого CSS будет ограничено в пределах компонента, связанного с роутом.

Использование Nuxt.js middleware:

Создайте файл middleware (например, myCustomMiddleware.js) в директории middleware вашего Nuxt.js проекта.
Внутри middleware файла, добавьте логику применения вашего CSS кода. Например, используйте document.querySelector('head').innerHTML += '<style>...</style>'; чтобы добавить CSS код в хэдер страницы.
В layouts компоненте вашего роута импортируйте созданный middleware:

     <template>
       ...
     </template>
     
     <script>
     export default {
       // ...
       middleware: 'myCustomMiddleware',
       // ...
     }
     </script>

Таким образом, ваш middleware будет выполняться только для роутов, которые используют этот layouts компонент.

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