@vue/cli-plugin-router

vue add router

const routerPlugin = require("@vue/cli-plugin-router");
const routerGenerator = require("@vue/cli-plugin-router/generator");
const routerPrompts = require("@vue/cli-plugin-router/prompts");

# Add router plugin to existing Vue project
vue add router

# The plugin will prompt for configuration:
# ? Use history mode for router? (Y/n)

/**
 * Main plugin entry point (currently empty implementation)
 * @param api - Vue CLI plugin API instance
 * @param options - Plugin configuration options
 */
function routerPlugin(api: PluginAPI, options: PluginOptions): void;

interface PluginOptions {
  [key: string]: any;
}

/**
 * Plugin prompts configuration for user interaction
 */
const prompts: PromptDefinition[];

interface PromptDefinition {
  name: string;
  type: 'confirm' | 'input' | 'list' | 'checkbox';
  message: string;
  description?: string;
  default?: any;
  choices?: any[];
  when?: (answers: any) => boolean;
}

const historyModePrompt: PromptDefinition = {
  name: 'historyMode',
  type: 'confirm',
  message: 'Use history mode for router? (Requires proper server setup for index fallback in production)',
  description: 'By using the HTML5 History API, the URLs don\'t need the \'#\' character anymore.'
};

/**
 * Main generator function that configures router in Vue projects
 * @param api - Vue CLI Generator API instance
 * @param options - User-selected options from prompts
 * @param rootOptions - Project-level configuration options
 */
function routerGenerator(
  api: GeneratorAPI,
  options: RouterOptions,
  rootOptions: RootOptions
): void;

interface RouterOptions {
  historyMode?: boolean;
}

interface RootOptions {
  vueVersion?: '2' | '3';
  cssPreprocessor?: string;
  bare?: boolean;
}

/**
 * AST transformer for injecting router usage in Vue 3 apps
 * @param file - File object containing source code
 * @param api - Transformation API with jscodeshift instance
 * @returns Transformed source code as string
 */
function injectUseRouter(file: FileInfo, api: TransformAPI): string;

interface FileInfo {
  path: string;
  source: string;
}

interface TransformAPI {
  jscodeshift: JSCodeshift;
}

interface GeneratorAPI {
  /** Inject import statements into the entry file */
  injectImports(file: string, imports: string): void;
  
  /** Apply AST transformations to a script file */
  transformScript(file: string, transformer: Function): void;
  
  /** Inject options into Vue root instance (Vue 2) */
  injectRootOptions(file: string, options: string): void;
  
  /** Add dependencies to package.json */
  extendPackage(packageModifications: PackageModifications): void;
  
  /** Render template files to the project */
  render(templatePath: string, data: TemplateData): void;
  
  /** Check if another plugin is installed */
  hasPlugin(pluginName: string): boolean;
  
  /** Boolean indicating if plugin is being invoked */
  invoking: boolean;
  
  /** Path to the main entry file */
  entryFile: string;
}

interface PackageModifications {
  dependencies?: Record<string, string>;
  devDependencies?: Record<string, string>;
  scripts?: Record<string, string>;
}

interface TemplateData {
  /** Whether to use HTML5 History API (true) or hash mode (false) */
  historyMode?: boolean;
  /** Whether Babel or TypeScript plugins are present for compilation */
  doesCompile?: boolean;
  /** Whether TypeScript plugin is installed */
  hasTypeScript?: boolean;
}

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history', // Only if historyMode: true
  base: process.env.BASE_URL,
  routes
})

export default router

// src/router/index.js
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  // Uses createWebHistory if historyMode: true, createWebHashHistory if historyMode: false
  history: createWebHistory(process.env.BASE_URL), // or createWebHashHistory()
  routes
})

export default router

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>