Как использовать v-bind в css с Nuxt.js на стороне сервера
Я хочу иметь динамическую цветовую схему для своих страниц. На основе URL-адреса я отправляю запрос API, который извлекает цветовую схему из базы данных.
Для этого я извлекаю цвета из хука хранилища nuxtServerInit. Затем я использую v-bind() в CSS для динамического окрашивания компонентов.
Для справки https://vuejs.org/api/sfc-css-features.html#css-modules. Бывший:
#main-container {
max-width: 500px;
margin: auto;
background-color: v-bind('designTemplate.backgroundColor');
}
Здесь designTemplate — это вычисляемая переменная, которая извлекает значение из хранилища.
Я использую ССГ. При проверке сгенерированных файлов я вижу, что цвета не привязаны к css, а отображаемая сервером страница не имеет требуемых цветов.
В сгенерированном файле я вижу
.class-name[data-v-15114cda]{background-color:var(--fec1f67e)}
Но переменная css fec1f7e не найдена в файле. Только во время гидратации цвета действительно применяются.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновлять: Решил проблему. Использовал альтернативный способ выполнения моего требования.
Вместо использования v-bind в css я создал переменные css корневого уровня. Это было сделано в шапке моей страницы.
head() {
return {
style: [
{
cssText: `
:root {
--base-color: ${this.designTemplate.baseColor};
--background-color: ${this.designTemplate.backgroundColor};
}
`,
type: 'text/css'
}
]
}
}
Имея это на месте, я могу получить доступ к этим переменным во всех моих файлах и стилизовать их как:
#main-container {
max-width: 500px;
margin: auto;
background-color: v-bind('designTemplate.backgroundColor');
}
Переменные css вводятся в заголовок html, и с генерацией на стороне сервера я получаю правильно окрашенную страницу, отображаемую сервером.