Vue コンポーネントのデモ

<div class="container">
  <div class="shopify-theme-lab">
    <h1 class="shopify-theme-lab__headline">
      Shopify Theme Lab 🧪
    </h1>

    <p class="shopify-theme-lab__text">
      Customizable modular development environment for blazing-fast Shopify theme creation.
    </p>

    <div class="shopify-theme-lab__examples">
      <!--
        * if "name: 'MyComponent'" is defined inside a vue file, it can be referenced as <my-component></my-component>
        * otherwise the component will be named after the file path starting from the components/ directory
        * for src/vue/components/render/my-component.vue it's: <render-my-component></render-my-component>
      -->

      <div class="shopify-theme-lab__example">
        <!-- render component example: src/vue/components/render/my-component.vue -->
        <render-my-component
          :shopify-data="{
            shopName: '{{ shop.name }}',
            shopDomain: '{{ shop.domain }}',
            shopEmail: '{{ shop.email }}',
            shopCurrency: '{{ shop.currency }}'
          }"
        >
          <div class="shopify-theme-lab__subline">
            Vue component with slots and props
          </div>
        </render-my-component>

        <!-- global mixin: src/vue/mixins/global.mixin.js -->
        <div>
          <div class="shopify-theme-lab__subline">
            Global Vue mixin
          </div>

          <div>
            NODE_ENV: {% raw %}{{ env }}{% endraw %}
          </div>
        </div>

        <!-- global directive: src/vue/directives/global.directive.js -->
        <div>
          <div class="shopify-theme-lab__subline">
            Global Vue directive
          </div>

          <div v-my-directive>
            this text
          </div>
        </div>
      </div>

      <div class="shopify-theme-lab__example">
        <!-- renderless component example: src/vue/components/renderless/my-component.vue -->
        <renderless-my-component v-slot="{ visible, toggle }">
          <div>
            <div class="shopify-theme-lab__subline">
              Renderless Vue component + Vuex
            </div>

            <div>
              Vuex “my-module” state “visible” is set to <strong>{% raw %}{{ visible }}{% endraw %}</strong>
            </div>

            <button @click="toggle" class="shopify-theme-lab__button">
              Click me!
            </button>
          </div>
        </renderless-my-component>

        <!-- vuex module: src/vue/store/my-module.js -->
        <div>
          <div class="shopify-theme-lab__subline">
            Vuex anywhere!
          </div>

          <div>
            Vuex “my-module” state “visible” is set to <strong>{% raw %}{{ $store.state['my-module'].visible }}{% endraw %}</strong>
          </div>

          <button
            class="shopify-theme-lab__button"
            @click="$store.dispatch('my-module/toggle')"
          >
            Click me, too!
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<component is="style">
.shopify-theme-lab {
  background: rgb(240,240,240);
  border-radius: 10px;
  padding: 30px;
  margin: 20px 0;
}

.shopify-theme-lab__headline {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.shopify-theme-lab__subline {
  font-size: 16px;
  font-weight: 700;
}

.shopify-theme-lab__text {
  font-size: 18px;
  text-align: center;
  margin-bottom: 40px;
}

.shopify-theme-lab__examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.shopify-theme-lab__example {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shopify-theme-lab__button {
  color: rgb(255,255,255);
  background: rgb(0,0,0);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  padding: 5px 15px;
  margin-top: 5px;
}

.shopify-theme-lab__button:hover {
  background: rgb(70,70,70);
}
</component>

{% schema %}
{
  "name": "Vue examples",
  "class": "vue-section",
  "presets": [
    {
      "name": "Vue examples"
    }
  ]
}
{% endschema %}