Как создать встраиваемый виджет с vueJS?

Question

Я хочу создать виджет с vuejs, который будет встраиваться в большинство веб-сайтов, таких как виджет оформления полосы. Виджет должен быть встроен в тег script, в который можно передать параметры конфигурации, и должен создать кнопку для элемента с определенным классом. При нажатии на кнопки, они будут отображать модальное с элементом из кнопки.

Мне нужно несколько идей для начала ...

Answer 1

Ваш вопрос довольно широкий, но в целом вам не нужно, чтобы все ваше приложение было Vue для создания виджета в Vue. Если вам нужно настроить свой виджет, рассмотрите возможность создания для него глобального объекта. Теперь вы можете читать window.Widget в своем приложении и использовать все, что там есть.

<script>
window.Widget = {
  backgroundColor: '#fcba03',
  nrOfPolarBears: 3,
}
</script>
<script src="link/to/your/app.js"></script>

В качестве альтернативы, если вам нужно загрузить свой виджет в iframe, у вас ограниченная конфигурируемость через строку запроса URLвы получаете:

<iframe src="link/to/index.html?backgroundcolor=%23fcba03&nrofpolarbears=3"></script>

// App.vue
const queryParams = window.location.search.substr(1).split('&').reduce(
  (acc, part) => {
    const [key, val] = part.split('=', 2)
    acc[decodeURIComponent(key)] = decodeURIComponent(val);

    return acc;
  },
  {}
)
console.log(queryParams.backgroundcolor);