nuxt-back-to-top

My new Nuxt module

• ✨  Release Notes

Features

• ⛰  Foo
• 🚠  Bar
• 🌲  Baz

Quick Setup

1. Add nuxt-back-to-top dependency to your project

# Using pnpm
pnpm add -D nuxt-back-to-top

# Using yarn
yarn add --dev nuxt-back-to-top

# Using npm
npm install --save-dev nuxt-back-to-top

2. Add nuxt-back-to-top to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-back-to-top'
  ],
  backToTop: {
    prefix: 'Nuxt',
    autoInsert: true, // If the autoInsert value is false, the component will be imported
  },
})

• If you do not need to insert automatically, you can use components
• Layout or app page use

<template>
<NuxtBackToTop />
</template>

props

props = {
    visibleoffset: {
      type: [String, Number],
      default: 600,
    },
    visibleoffsetbottom: {
      type: [String, Number],
      default: 0,
    },
    right: {
      type: String,
      default: '30px',
    },
    bottom: {
      type: String,
      default: '40px',
    },
    scrollFn: {
      type: Function,
      default: function (eventObject) { },
    },
    width: {
      type: String,
      default: '30px',
    },
    height: {
      type: String,
      default: '30px',
    },
    color: {
      type: String,
      default: '#257EDF',
    },
  },

That's it! You can now use My Module in your Nuxt app ✨

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release