Как правильно построить структуру компонента на Vue + webpack для последующего отдельного использования этого компонента?

Question

[Дмитрий Петрик]

Пишу компонет на Vue, при этом использую webpack. Хотелось бы использовать потом этот компонент на своем сайте без Vue. Грубо говоря, чтобы подключил скрипт на страницу и стили (которые получаются после сборки webpack'ом), создал экземпляр компонента, передал параметры и использовать его. Например так:

var modal = new MyComponent({
el: "#app"
options: {
    text: 'какой-то текст'
}
});
modal.show()

Как это сделать? Может гайд есть какой-то? Пока что после сборки я никак не могу манипулировать компонентом, все зашито в сборочных скриптах

Comments

[Evgeny Kulakov]

Т.е. на выходе вы хотите получить js файл, в котором будет vue и ваши компоненты. И далее использовать этот файл для подключения на др.сайт? Или как-то по-другому?

[Алексей Черемисин]

Evgeny Kulakov: я так понимаю, на выходе хотелось бы получить js-файл только компонента, без vue. А vue подключать через тег link. Собственно подпишусь под вопросом.

[Дмитрий Петрик]

Evgeny Kulakov: Алексей почти верно идею понял. Обычно мы в main.js пишем

var vm = new Vue({
  el: '#app',
...
render: h => h(MyComponent)
});

Я хочу подключать компонент через link себе на сайт, а потом уже на нужной странице, например, в теге script создать экземпляр Vue и отрисовать компонент с нужными мне параметрами (как обычно делаем в main.js (см. код выше)) и использовать его. По сути так все библиотеки js работают

[Evgeny Kulakov]

Ответа нет) Но можно форкнуть либу типа вот такой: https://github.com/vuetifyjs/vuetify, после билда на выходе у нее по сути то, что вам нужно - js файл с компонентами. Далее, удаляем все их компоненты и пишем свои, пробуем собрать, заодно разбираемся как это работает, какие настройки и т.д.

[Дима]

vue-loader – это загрузчик для Webpack, который преобразует Vue компоненты, написанные в следующем формате в обычные JavaScript модули:

Видимо с его помощью.

[Дима]

Еще вот это интересная опция, но возможно не про то
https://ru.nuxtjs.org/guide/#статическая-генерация

[tolorov]

Пишу компонет на Vue, при этом использую webpack. Хотелось бы использовать потом этот компонент на своем сайте без Vue.

Бред какой-то. Если компонент на Вью, как его использовать без Вью? Солнце напекло?

[Дмитрий Петрик]

Согласен, криво написал. В комментариях растолковал

[Алексей Черемисин]

Поясню, хочется скомпилировать через webpack компонент, чтобы получился js-файл без добавления кода vuejs. А сам vue подключать отдельно на странице в хедере.

[Максим Мосейчук]

Я всё о телеграме. Вопрос тот удалили. Серверная часть не нужна, достаточно знать, какие данные передаёт клиент.