Installation

Requirements

Environment	Minimum version
Node.js	18+
Vue (for @macrulez/inview-vue, optional)	3.3+
Nuxt (for @macrulez/inview-nuxt, optional)	3.9+ or 4.0+
React (for @macrulez/inview-react, optional)	18+ or 19+

@macrulez/inview-core itself has no peer dependencies — it runs anywhere, including outside a framework entirely.

Installation

Install whichever adapter matches your project — each one already depends on @macrulez/inview-core, so you don't need to install the core package yourself unless you're using it directly, with no framework.

# Framework-agnostic core only
npm install @macrulez/inview-core

# Vue 3
npm install @macrulez/inview-vue

# Nuxt (pulls in the Vue adapter)
npm install @macrulez/inview-nuxt

# React
npm install @macrulez/inview-react

Quick start — Vanilla / Core

import { createScrollEngine } from '@macrulez/inview-core'

const scroll = createScrollEngine()

scroll.subscribe((state) => {
  console.log(state.y, state.direction, state.progress)
})

Quick start — Vue

<script setup>
import { useScroll } from '@macrulez/inview-vue'

const { y, direction, progress } = useScroll()
</script>

<template>
  <div>{{ y }}px, scrolling {{ direction }}, {{ Math.round(progress * 100) }}%</div>
</template>

Quick start — Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/inview-nuxt'],
  inview: {
    defaultRootMargin: '-10% 0px',
  },
})

<script setup>
// useScroll is auto-imported — no explicit import needed
const { y, isScrolling } = useScroll()
</script>

Quick start — React

import { useScroll } from '@macrulez/inview-react'

function ScrollIndicator() {
  const { y, direction, progress } = useScroll()
  return (
    <div>
      {y}px, scrolling {direction}, {Math.round(progress * 100)}%
    </div>
  )
}