Retrieves the available shipping methods for the checkout process. When the checkout option is enabled, it reads checkout session data to provide region-aware shipping methods. Returns each shipping method with its details and a total count of available methods.

Component Options

Option Type Default Description
checkout bool|null null When truthy, loads checkout session data to provide context-aware shipping methods (e.g. region-specific rates, weight-based pricing).

Component Properties

Property Type Description
shipping array Array of available shipping methods, keyed by method name.
shipping.{name}.name string Internal shipping method identifier.
shipping.{name}.title string Display title for the shipping method.
shipping.{name}.description string Description of the shipping method.
shipping.{name}.cost float Base cost for this shipping method.
shipping.{name}.free_shipping float Minimum order amount for free shipping.
shipping.{name}.text string Display text (e.g. "Free shipping" when conditions are met).
shipping.{name}.region_id int Region ID this shipping method applies to.
shipping.{name}.tax_type_id int Tax type associated with this shipping method.
shipping.{name}.weight array Weight-based pricing tiers with above_weight and price values.
count int Total number of available shipping methods.

HTML Example

<div data-v-component-checkout-shipping>
  <div data-v-shipping>
    <input type="radio" name="shipping" data-v-shipping-name value="" />
    <label data-v-shipping-title></label>
    <p data-v-shipping-description></p>
    <span data-v-shipping-cost></span>
    <span data-v-shipping-text></span>
  </div>
</div>

Template Example

<div data-v-component-checkout-shipping>
  <template data-v-template="shipping-method">
    <div class="shipping-option">
      <input type="radio" name="shipping_method" data-v-shipping-name />
      <label data-v-shipping-title></label>
      <p data-v-shipping-description></p>
      <span data-v-if-not="shipping.cost">Free</span>
      <span data-v-if="shipping.cost" data-v-shipping-cost></span>
      <span data-v-shipping-text></span>
    </div>
  </template>
</div>