Composables

WooNuxt provides 13 composables that handle all store logic. They are available globally — no import needed.

useCart

Manages the shopping cart state and all cart mutations.

const {
  cart,              // Ref<Cart> — reactive cart object
  cartTotals,        // Computed cart totals
  cartCount,         // Computed item count
  isUpdatingCart,    // Ref<boolean> — loading state
  addToCart,         // (input: AddToCartInput) => Promise<void>
  updateItemQuantity,// (key: string, quantity: number) => Promise<void>
  removeItem,        // (key: string) => Promise<void>
  emptyCart,         // () => Promise<void>
  applyCoupon,       // (code: string) => Promise<void>
  removeCoupon,      // (code: string) => Promise<void>
} = useCart()

Modes: The cart supports optimistic (instant UI feedback) and safe (wait for server confirmation) update modes. Mutations are queued to prevent race conditions.

useAuth

Handles customer authentication, sessions, and account data.

const {
  customer,          // Ref<Customer> — logged-in customer data
  viewer,            // Ref<Viewer> — current user
  orders,            // Ref<Order[]>
  downloads,         // Ref<Download[]>
  isPending,         // Ref<boolean>
  isLoggedIn,        // ComputedRef<boolean>
  loginUser,         // (input: LoginInput) => Promise<{ success, error }>
  logoutUser,        // () => Promise<void>
  registerUser,      // (input: RegisterInput) => Promise<{ success, error }>
  updateCustomer,    // (input: UpdateCustomerInput) => Promise<void>
  refreshCart,       // () => Promise<void>
} = useAuth()

Authentication uses JWT tokens stored in cookies. Tokens are refreshed automatically on expiry via useAuthTokens.

useCheckout

Controls the checkout flow, shipping, and payment method selection.

const {
  orderInput,        // Ref — checkout form state
  isProcessingOrder, // Ref<boolean>
  proccessCheckout,  // () => Promise<void>
  paymentGateways,   // Ref<PaymentGateway[]>
  shippingMethods,   // Ref<ShippingMethod[]>
} = useCheckout()

useFiltering

Manages URL-based product filtering by attributes, price range, and sale status.

const {
  isFiltersActive,   // ComputedRef<boolean>
  activeFilters,     // ComputedRef<ActiveFilters>
  resetFilters,      // () => void
} = useFiltering()

Filter state is synced with the URL query string so filters are shareable and survive page refresh. Global attributes are configured via the WooNuxt Settings plugin.

useProducts

Manages product list state and the full filtering/sorting pipeline.

const {
  products,          // Ref<Product[]>
  allProducts,       // Ref<Product[]> — unfiltered
  isLoading,         // Ref<boolean>
  loadMore,          // () => Promise<void>
} = useProducts()

useSorting

Controls product sort order.

const {
  sortOrder,         // Ref<string>
  setSortOrder,      // (order: string) => void
} = useSorting()

Available sort options: DATE, PRICE, PRICE_DESC, RATING, POPULARITY.

useSearch

Handles product search queries.

const {
  searchQuery,       // Ref<string>
  searchResults,     // Ref<Product[]>
  isSearching,       // Ref<boolean>
  clearSearch,       // () => void
} = useSearch()

useWishlist

Persists a wishlist in localStorage.

const {
  wishlist,          // Ref<number[]> — array of product IDs
  addToWishlist,     // (productId: number) => void
  removeFromWishlist,// (productId: number) => void
  isInWishlist,      // (productId: number) => boolean
  toggleWishlist,    // (productId: number) => void
} = useWishlist()

useCountry

Manages country and state selection for address forms.

const {
  allowedCountries,  // Ref<Country[]>
  states,            // Ref<State[]>
  getStates,         // (countryCode: string) => Promise<void>
} = useCountry()

useHelpers

Utility functions used throughout the app.

const {
  formatPrice,       // (price: string) => string
  stripHtml,         // (html: string) => string
  scrollToTop,       // () => void
  isClient,          // boolean
} = useHelpers()

useSEOFallbacks

Provides fallback SEO meta tags when Yoast data is unavailable.

const { generateSEO } = useSEOFallbacks()
// generateSEO(product) → useSeoMeta()-compatible object

useYoastHead

Injects full Yoast SEO head tags for a product.

const { setYoastHead } = useYoastHead()
// setYoastHead(fullYoastHead: string) → void

Requires the fullYoastHead field to be exposed by the WooNuxt Settings plugin (graphql/yoast.php).

useAuthTokens

Low-level JWT token management. Used internally by useAuth — you should not need to call this directly.

const {
  getAuthToken,      // () => string | null
  setAuthToken,      // (token: string) => void
  clearAuthToken,    // () => void
} = useAuthTokens()