Nuxt 3

# Using yarn
yarn add @twicpics/components
# Or using npm
npm install @twicpics/components

export default defineNuxtConfig({
  modules: [`@twicpics/components/nuxt3`],
  twicpics: {
    domain: `https://<your-domain>.twic.pics`,
  },
})

// here is an example of a `nuxt.config.ts` configured with TwicPics.
export default defineNuxtConfig({
  modules: [`@twicpics/components/nuxt3`],
  twicpics: {
    domain: `https://<your-domain>.twic.pics`,
    anticipation: 0.5,
    step: 50,
  },
})

<template>
  <main>
    <TwicImg src="path/to/your/image" />
  </main>
</template>

<!-- component.vue -->
<template>
  <main>
    <TwicImg src="path/to/your/image" />
  </main>
</template>

<TwicView>
  <TwicImg src="image1.jpg" />
  <TwicImg src="image2.jpg" />
  <TwicImg src="image3.jpg" />
</TwicView>

<TwicImg src="image1.jpg" zoom="2" /> <TwicImg src="image2.jpg" zoom="2.5" />

<TwicImg src="image3.jpg" zoom="css" class=".zoom-3" />

.zoom-3 {
  --twic-zoom: 3;
}

<!-- component.vue -->
<template>
  <main>
    <div class="style-driven-responsive">
      <TwicImg src="path/to/your/image" @stateChange="handleStateChange" />
    </div>
  </main>
</template>

<script>
  export default {
    name: 'App',
    data() {
      state: undefined
    },
    methods: {
      handleStateChange(stateEvent) {
        // Implement the logic here
        const { state } = stateEvent
        this.state = state
        console.log(`TwicComponent emits a new state`, this.state)
      },
    },
  }
</script>

  <!-- default refit: centered object(s), no padding around -->
  <TwicImg src="image1.jpg" refit />

  <!-- main subject(s) will be left aligned -->
  <TwicImg src="image3.jpg" anchor="left" refit/>

  <!-- a 5% padding will be applied around main subject(s) -->
  <TwicImg src="image2.jpg" refit="5p" />

  <!-- a 5% padding will be applied vertically, a 10% padding will be applied horizontally -->
  <TwicImg src="image3.jpg" refit="5p,10p" />

<!-- component.vue -->
<template>
  <main>
    <div class="twic-item landscape">
      <TwicImg src="path/to/your/image"></TwicImg>
    </div>
    <div class="twic-item square">
      <TwicImg src="path/to/your/image"></TwicImg>
    </div>
    <div class="twic-item portrait">
      <TwicImg src="path/to/your/image"></TwicImg>
    </div>
    <div class="twic-item contain left">
      <TwicImg src="path/to/your/image" ratio="16/9"></TwicImg>
    </div>
    <div class="twic-item contain right">
      <TwicImg src="path/to/your/image" ratio="16/9"></TwicImg>
    </div>
    <div class="twic-item lg">
      <TwicImg src="path/to/your/image"></TwicImg>
    </div>
    <div class="twic-item md">
      <TwicImg src="path/to/your/image"></TwicImg>
    </div>
    <div class="twic-item sm">
      <TwicImg src="path/to/your/image"></TwicImg>
    </div>
    <!---
    Attributes take precedence over CSS.
    In the next example, ratio will 16/9 AND NOT 1 as defined in square css class 
--->
    <div class="cover square">
      <TwicImg src="path/to/your/image" ratio="16/9"></TwicImg>
    </div>
  </main>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style>
  .landscape {
    --twic-ratio: calc(4 / 3);
  }
  .portrait {
    --twic-ratio: calc(3 / 4);
  }
  .square {
    --twic-ratio: calc(1);
  }

  .lg {
    width: 300px;
  }

  .md {
    width: 150px;
  }

  .sm {
    width: 100px;
  }
</style>

<!-- component.vue -->
<template>
  <main>
    <div class="style-driven-responsive">
      <TwicImg src="path/to/your/image"></TwicImg>
    </div>
  </main>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style>
  .style-driven-responsive {
    --twic-ratio: calc(2 / 3);
    --twic-mode: cover;
    margin: auto;
  }

  @media (min-width: 640px) {
    .style-driven-responsive {
      --twic-ratio: calc(1);
    }
  }

  @media (min-width: 768px) {
    .style-driven-responsive {
      --twic-ratio: calc(4 / 3);
    }
  }

  @media (min-width: 1024px) {
    .style-driven-responsive {
      --twic-ratio: calc(16 / 9);
    }
  }

  @media (min-width: 1280px) {
    .style-driven-responsive {
      --twic-ratio: calc(1.85);
    }
  }

  @media (min-width: 1536px) {
    .style-driven-responsive {
      --twic-ratio: calc(21 / 9);
    }
  }
</style>

<!-- component.vue -->
<template>
  <TwicImg src="path/to/your/image" class="hero-image" ratio="none"></TwicImg>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style>
  /* You are responsible for properly sizing the component. */
  .hero-image {
    height: 500px;
  }

  @media (min-width: 1024px) {
    .hero-image {
      height: 300px;
      width: 100%;
    }
  }
</style>

<TwicImg
  src="<path>"
  alt="<String>"
  anchor="<String>"
  bot="<String>"
  eager="<boolean>"
  focus="<auto|coordinates>"
  intrinsic="<String>"
  mode="<contain|cover>"
  onStateChange="<function>"
  position="<css position>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  refit="<boolean|String>"
  step="<integer>"
  title="<String>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  zoom="<String | Number>"
/>