Как создавать компонент vue.js и правильно подключить его к странице?

Question

[RudMa]

Всем привет! Подскажите, пожалуйста, что я делаю не так? По идее при таком подключении должно вывестись три компонента, но по-моему идет инициализация только дива с айдишником и выводится только один компонент
(это подключение в файле pug)

block contentBody
  .cells
    .cell.cell-xl-8
      #app-cart(data-url="http://localhost:3000/products")
        <app-cart><app-cart/>
        <app-cart><app-cart/>
        <app-cart><app-cart/>

здесь я создаю компонент(файл -app-cart.vue):

cart.component("app-cart", {
data() {
  return {
    URL: document.getElementById("app-cart").dataset.url
  }
},
<template>
  <cart
  v-if="PRODUCTS.length"
  :URL="URL"
  :CONSTANTS="CONSTANTS"/>
  <cart-empty v-else/>
</template>

<script>
import cart from "./components/cart.vue"
import cartEmpty from "./components/cart-empty.vue"
import {mapActions, mapGetters} from "vuex"
export default {
  name: "app-cart",
  components: { cart, cartEmpty },
  computed: {
    ...mapGetters([
      "PRODUCTS",
      "CONSTANTS"
    ])
  },
  methods: {
  ...mapActions([
    "SET_PRODUCTS_TO_STATE",
    "DEACTIVATE_CART_STATUS",
    "DELETE_ALL_PRODUCTS_FROM_CART",
    "DEFINE_ENCODING",
    "SHOW_CART_FORM"
  ])
  },
   mounted() {
    this.SHOW_CART_FORM();
    this.SET_PRODUCTS_TO_STATE();
    this.DEFINE_ENCODING();
  }
}
</script>
});

а в js файле его инициализирую(cart-vue.js)

import { createApp } from "vue";
import App from "./app-cart.vue";
import store from "./vuex/store.js";

let cartApp = document.querySelector("#app-cart");

if (cartApp) {
  const cart =  createApp(App, {props: ["data-url"]})
    .use(store)
    .mount("#app-cart");
}

Comments

[RudMa]

Может я немного неправильно понимаю и в моем случае переиспользуемый компонент это использование таким образом?

.cell.cell-xl-8
      #app-cart(data-url="http://localhost:3000/products")
      #app-cart1(data-url="http://localhost:3000/products")

createApp(App, {props: ["data-url"]})
    .use(store)
    .mount("#app-cart");

    createApp(App, { props: ["data-url"] })
      .use(store)
      .mount("#app-cart1");

Answer 1

[Aetae]

block contentBody
  .cells
    .cell.cell-xl-8
      #app-cart(data-url="http://localhost:3000/products")
        app-cart
        app-cart
        app-cart

Vue тут не при чём.

Comments

[RudMa]

В смысле? У меня компонент написан на Vue.js

[WapSter]

RudMa, ну так ты синтаксис неверный используешь

[Aetae]

RudMa, компонент хоть на vue хоть на молоке, ошибка у тебя в синтаксисе pug.

[RudMa]

спасибо, учла это. Но в итоге все-равно отображается один компонент

[Aetae]

RudMa, хз у меня всё работает. Сделай минимальный пример с ошибкой на codepen\jsfiddle\codesendbox.


Мб ты где-то ещё с pug косячишь, посмотри вот тут, что тебе твой pug в виде реального html выдаёт: