Installation

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

Setup

Add to a Vue project

Install mockline package:

bun add mockline

Add the Mockline Vite plugin in your `vite.config.ts`

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mockline from 'mockline/vite'

export default defineConfig({
  plugins: [
    vue(),
    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.

Mockline registers unplugin-auto-import and unplugin-vue-components, which will generate auto-imports.d.ts and components.d.ts type declaration files. You will likely want to gitignore these, and add them to your tsconfig.

tsconfig.app.json

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

.gitignore

# Auto-generated type declarations
auto-imports.d.ts
components.d.ts

Use the Mockline Vue plugin in your `main.ts`

main.ts

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import mockline from 'mockline/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(mockline)

app.mount('#app')

Import Tailwind CSS and Mockline in your CSS

assets/main.css

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

Import the CSS file in your main.ts.

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import mockline from 'mockline/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(mockline)

app.mount('#app')

Wrap your app with App component

App.vue

<template>
  <MApp>
    <RouterView />
  </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.