Можно ли по-прежнему использовать DOM-манипуляции во время выполнения на сайте, созданном Nuxt? - PullRequest
Новая
       8

Можно ли по-прежнему использовать DOM-манипуляции во время выполнения на сайте, созданном Nuxt?

0 голосов
/ 09 января 2020

У меня есть проект Nuxt / Vue, который я использую для предварительного рендеринга одностраничного веб-сайта (не SPA, а stati c универсальный режим) с помощью команды generate. Все данные c html отображаются правильно, но я хотел бы позвонить в API Google Sheets в время выполнения и обновить DOM, используя полученные значения. Сохраняется ли реактивность Vue после генерации нукста? Или мне придется go маршрут ванильного javascript Nuxt-плагина для манипулирования DOM?

Система, в которую мы помещаем этот код, обслуживается Adobe Experience Manager, поэтому Nuxt SSR, к сожалению, не работает вопрос.

1 Ответ

0 голосов
/ 09 января 2020

Я нашел способ, который работает для меня. Загрузка в Vue из CDN через объект заголовка nuxt.config: 

script: [
  {src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'}
],

приведет к загрузке Vue во время выполнения. Не забудьте загрузить полный пакет с компилятором, так как мы выполняем шаблоны во время выполнения. Теперь создайте плагин только для клиента (установите для режима «client» ИЛИ назовите свой файл my-script.client. js) и поместите внутри директории ~ / plugins: 

plugins: [
  {src: '~/plugins/my-script', mode: 'client' }
],

Внутри my-script. js вы можете создать новый Vue (), который будет монтировать *. vue SF C: 

import Vue from 'vue'; // Not sure if this is strictly required
import MyComponent from '@/components/MyComponent.vue';

new Vue({
  render: h => h(MyComponent)
}).$mount('#app');

Очевидно, чтобы это работало, вам нужен div с идентификатором #app внутри предварительно обработанного кода.

...