Vue Viewport

Appearance

Getting Started ​

Installation ​

sh
$ npm add -D @vikeriait/vue-viewport
sh
$ pnpm add -D @vikeriait/vue-viewport
sh
$ yarn add -D @vikeriait/vue-viewport
sh
$ bun add -D @vikeriait/vue-viewport

Quick Start ​

Register the plugin globally in your Vue app. Choose the setup that matches your styling preference:

typescript
import { createApp } from 'vue'
import App from './App.vue'
import ViewportPlugin from '@vikeriait/vue-viewport'

// Import Tailwind-optimized CSS (adds utilities layer)
import '@vikeriait/vue-viewport/tailwind'

const app = createApp(App)
app.use(ViewportPlugin)
app.mount('#app')
typescript
import { createApp } from 'vue'
import App from './App.vue'
import ViewportPlugin from '@vikeriait/vue-viewport'

// Import pre-built CSS (includes all presets)
import '@vikeriait/vue-viewport/css'

const app = createApp(App)
app.use(ViewportPlugin)
app.mount('#app')

Basic Usage ​

Simply add the v-viewport directive to any element:

html
<VViewport preset="fade-up"> Hello Viewport! </VViewport>
html
<div v-viewport="'fade-up'">Hello Viewport!</div>
<!-- OR -->
<div v-viewport:fade-up">Hello Viewport!</div>