Как использовать пользовательский компонент Vue из CDN в Nuxt - PullRequest
Новая
       118

Как использовать пользовательский компонент Vue из CDN в Nuxt

0 голосов
/ 19 июня 2020

Пытаясь отделить компонент заголовка от монолита, я сделал его потребляемым с помощью тега скрипта и CDN. Теперь я хотел бы импортировать его в проект Nuxt через этот CDN.

Я считаю, что распределение компонентов CDN зависит от Vue (и Vuex в моем случае), чтобы быть доступным глобально (обычно это означает, что он также загружается через CDN) в браузере. Как я могу убедиться, что это возможно с помощью Nuxt?

Более того, даже загрузка в мой компонент через тег скрипта не делает его доступным глобально, поэтому я могу использовать его внутри компонента.

Загрузка только моего компонента: 

<template>
  <div class="page-wrapper">
    <my-header />
    <nuxt />
    <my-footer />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
    <script src="http://localhost:8081/js/header.packaged.js"></script>
  </div>
</template>

<script>
import MyFooter from '@/components/MyFooter.vue'

export default {
  components: {
    MyFooter,
    MyHeader // eslint-disable-line
  }
}
</script>

Если я просто попытаюсь загрузить свой компонент на такую ​​страницу, я получу ошибку MyHeaderComponent is not defined. Как упоминалось ранее, меня также беспокоит, что Vue и Vuex будут недоступны для моего компонента, который я загружаю через CDN. Есть ли стандартный способ сделать это?

...