Installation

Learn how to install and configure Mockline in your Nuxt application.

Setup

Add to a Nuxt project

Add mockline module automatically to your project:

npx nuxi@latest module add mockline

or install it manually:

bun add mockline

If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss in your project's root directory.

Add it to the modules section in your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['mockline']
})

Import Tailwind CSS and Mockline in your CSS

@import "tailwindcss";
@import "mockline";

It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:

.vscode/settings.json

"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
},
"tailwindCSS.classAttributes": ["class", "ui"],
"tailwindCSS.experimental.classRegex": [
  ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]

Wrap your app with App component

app.vue

<template>
  <MApp>
    <NuxtPage />
  </MApp>
</template>

Options

You can customize Mockline by providing options in your nuxt.config.ts.

`prefix`

Use the prefix option to change the prefix of the components.

Default: M

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['mockline'],
  css: ['~/assets/css/main.css'],
  ui: {
    prefix: 'Nuxt'
  }
})

Continuous Releases

Mockline uses pkg.pr.new for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Automatic preview releases are created for all commits and PRs to the main branch. Use them by replacing your package version with the specific commit hash or PR number.

package.json

{
  "dependencies": {
-   "mockline": "^0.17.0",
+   "mockline": "https://pkg.pr.new/mockline/mockline@4c96909",
  }
}

pkg.pr.new will automatically comment on PRs with the installation URL, making it easy to test changes.

Introduction

Fully styled and customizable components for Nuxt.

Introduction

A comprehensive guide to using typography styles and Markdown formatting in Mockline.