nuxt-edit-this-page

Add an "Edit this page" link to your Nuxt pages

📖 Release Notes

Features

This module let's you add "Edit this page" links to your Nuxt project's pages. The link opens the web IDE for the active file, which is the page's Vue file by default but that can be changed as needed by using a custom path resolver.

Supported Git services

• GitLab

Setup

• Install the module with your favorite package manager.

yarn add @gitlab/nuxt-edit-this-page
# Or npm i @gitlab/nuxt-edit-this-page

• Add @gitlab/nuxt-edit-this-page to the modules section in nuxt.config.js.

// nuxt.config.js
{
  modules: [
    '@gitlab/nuxt-edit-this-page',
 ],
}

• Configure the module as needed by adding an editThisPage key to nuxt.config.js.

// nuxt.config.js
{
  editThisPage: {
    // Module options
  }
}

Usage

When enabled, the module registers a global component that you can use to display an "Edit this page" link in any of your page. The component will automatically generate a link based on the route that's being visited so that you can quickly access the live editor on the Git hosting service.

<template>
  <edit-this-page-link />
</template>

The component accepts a few props to customize the ads you display.

Options

repo

• Type: String: required

The remote Git repository where the files reside, can be an HTTPS URL or an SSH address.

Example:

// nuxt.config.js
{
  editThisPage: {
    repo: '[email protected]:gitlab-org/frontend/nuxt-edit-this-page.git',

    // Or
    // repo: 'https://gitlab.com/gitlab-org/frontend/nuxt-edit-this-page.git',

    // Also works with the project's URL
    // repo: 'https://gitlab.com/gitlab-org/frontend/nuxt-edit-this-page',
  }
}

path

• Type: String
• Default: 'blob'

The path option is appended to the base edit URL. By default, the blob path is used, which produces URLs like https://gitlab.com/gitlab-org/frontend/nuxt-edit-this-page/blob/master/README.md. This option could be used to make the URL point to the edit path directly, ie setting path to 'edit' would produce URLs like https://gitlab.com/gitlab-org/frontend/nuxt-edit-this-page/edit/master/README.md.

branch

• Type: String
• Default: 'master'

Git branch to use when editing files.

linkText

• Type: String
• Default: 'Edit this page'

Text to show when rendering the link.

componentName

• Type: String
• Default: 'EditThisPageLink'

The component's name.

Props

The component accepts a few props that let you override the module's options if needed.

editUrl

• Type: String

Base URL to prepend to the file path when generating the edit link. This is computed automatically based on the repo and branch options, use it when you need to override the URL on a case-per-case basis.

linkText

• Type: String

Text to show when rendering the link. Defaults to the value set in the module's options.

Scoped slot

The component exposes a scoped slot that you can use to customize the rendering if props are too limited. The slot receives a property href that contains the computed edit URL.

Example

<template>
  <edit-this-page-link>
    <template v-slot:default="{ href }">
      <span>Customized link pointing to {{ href }}</span>
    </template>
  </edit-this-page-link>
</template>

Custom path resolver

Sometimes, your pages display contents from other files and you might want the "Edit this page" link to point to the included file, rather than the visited page's component. This can be achieved by adding an editThisPage.resolve option to your page. editThisPage.resolve is a function that receives the current route and should return the computed file path relative to the repository's root.

Example:

<template>
  <!-- pages/_slug.vue -->
</template>

<script>
export default {
  editThisPage: {
    resolve({ route }) {
      const { slug } = route.params;
      return `docs/${slug}.md`;
    },
  },
};
</script>

Development

• Clone this repository
• Install dependencies using yarn install
• Start development server using yarn dev

License

MIT License

Copyright (c) GitLab