### Example Usage of VueLoaderPlugin in Webpack Configuration

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/03-vue-loader-plugin.md

This example demonstrates how to integrate VueLoaderPlugin into a webpack.config.js file. Ensure both vue-loader and VueLoaderPlugin are installed.

```javascript
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
```

--------------------------------

### Example: Template Inlining Conditions

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/08-resolve-script.md

Illustrates scenarios where a template can be inlined into a `<script setup>` block (production only) versus cases where it cannot due to preprocessors, external sources, or the absence of `<script setup>`.

```typescript
// These can be inlined (production only)
<script setup>
export default { ... }
</script>
<template>...</template>

// Cannot be inlined - has preprocessor
<template lang="pug">...</template>

// Cannot be inlined - external template
<template src="./external.html"></template>

// Cannot be inlined - no script setup
<script>export default { ... }</script>
<template>...</template>
```

--------------------------------

### Example Query Strings

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/04-select-block.md

Illustrative query strings demonstrating how different SFC blocks can be requested.

```none
foo.vue?vue&type=template&id=abc12345&scoped=true&ts=true
foo.vue?vue&type=script&lang=ts
foo.vue?vue&type=style&index=0&id=abc12345&module=true
foo.vue?vue&type=custom&index=0&blockType=i18n
```

--------------------------------

### StyleInlineLoader Result Example

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/07-style-loaders.md

Shows an example of the output generated by StyleInlineLoader when processing CSS.

```javascript
export default ".container { color: red; }"
```

--------------------------------

### Example Property Array for exportHelper

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/13-misc-utilities.md

Illustrates the format of the property array passed to `exportHelper` before and after processing.

```javascript
[
  ['__scopeId', '"data-v-a1b2c3d4"'],
  ['__file', '"/path/to/App.vue"'],
  ['__cssModules', 'cssModules'],
  ['render', 'render']
]
```

```javascript
[
  ['__scopeId', 'data-v-a1b2c3d4'],
  ['__file', '/path/to/App.vue'],
  ['__cssModules', { ... }],
  ['render', function render(...) { ... }]
]
```

--------------------------------

### Plugin Usage Example

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Demonstrates checking for Webpack 5 compatibility and setting up Hot Module Replacement (HMR) hooks within a plugin.

```typescript
const isWebpack5 = testWebpack5(compiler)
if (needHMR(vueLoaderOptions, compiler.options)) {
  // Setup HMR hooks
}
```

--------------------------------

### Vue Single-File Component Example

Source: https://github.com/vuejs/vue-loader/blob/main/README.md

A basic example of a Vue Single-File Component (SFC) demonstrating template, script, and style sections. This format is enabled by vue-loader.

```vue
<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
    }
  },
}
</script>

<style>
.example {
  color: red;
}
</style>
```

--------------------------------

### Example Template Request URL

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/05-template-loader.md

Illustrates the format of a template request URL processed by the Vue Loader.

```text
src/App.vue?vue&type=template&id=a1b2c3d4&scoped=true
```

--------------------------------

### cleanQuery Examples

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/10-descriptor-cache.md

Demonstrates the usage of the `cleanQuery` function with different input strings, showing how it removes query parameters to normalize file paths for cache key purposes.

```typescript
cleanQuery('App.vue?vue&type=script') // 'App.vue'
```

```typescript
cleanQuery('App.vue') // 'App.vue'
```

```typescript
cleanQuery('foo?bar?baz') // 'foo'
```

--------------------------------

### resolveScript

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/08-resolve-script.md

Compiles and returns the script block, handling `<script setup>` transformations, TypeScript, and caching.

```APIDOC
## resolveScript

### Description
Compiles and returns the script block, handling `<script setup>` transformations and caching.

### Signature
```typescript
function resolveScript(
  descriptor: SFCDescriptor,
  scopeId: string,
  options: VueLoaderOptions,
  loaderContext: LoaderContext<VueLoaderOptions>
): SFCScriptBlock | null
```

### Parameters
#### Path Parameters
- **descriptor** (SFCDescriptor) - Required - Parsed SFC descriptor containing script and scriptSetup blocks
- **scopeId** (string) - Required - Hash ID for scoped styles and HMR (8-character hex)
- **options** (VueLoaderOptions) - Required - Loader configuration including compiler options
- **loaderContext** (LoaderContext) - Required - Webpack loader context

### Returns
`SFCScriptBlock | null` - Compiled script block or null if no script/scriptSetup

### Returns null if:
- Neither `descriptor.script` nor `descriptor.scriptSetup` exists

### Throws
Catches exceptions from compiler and emits via `loaderContext.emitError()`
```

--------------------------------

### Check VueLoaderPlugin Installation

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Verify if VueLoaderPlugin is installed and correctly configured in your webpack plugins array. This is crucial for vue-loader to function.

```javascript
const { VueLoaderPlugin } = require('vue-loader')

if (!plugins.some(p => p instanceof VueLoaderPlugin)) {
  console.warn('VueLoaderPlugin not installed!')
}
```

--------------------------------

### Get Loader Options

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Retrieves options for the loader context. This is a common pattern used in the main loader file.

```typescript
const options = getOptions(loaderContext) as VueLoaderOptions
const scriptRequest = stringifyRequest(src + query)
```

--------------------------------

### Resolve and Compile Script Block

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/08-resolve-script.md

Compiles the script block of a Single File Component (SFC), handling `<script setup>` transformations and managing compilation caches. It returns the compiled script block or null if no script or script setup block is present. Exceptions during compilation are caught and emitted as errors.

```typescript
function resolveScript(
  descriptor: SFCDescriptor,
  scopeId: string,
  options: VueLoaderOptions,
  loaderContext: LoaderContext<VueLoaderOptions>
): SFCScriptBlock | null
```

--------------------------------

### Example Processing Flow Result

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/06-pitcher.md

Illustrates the output of the pitcher's processing flow, showing how it generates proxy module code that imports the actual template processed by subsequent loaders.

```javascript
export { default } from "!./templateLoader!./babel-loader!./src/App.vue?vue&type=template&..."
export * from "!./templateLoader!./babel-loader!./src/App.vue?vue&type=template&..."
```

--------------------------------

### Webpack Configuration for Vue Loader

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/01-vue-loader-main.md

Example webpack.config.js demonstrating how to integrate Vue Loader and VueLoaderPlugin. Ensure the test regex matches .vue files and the VueLoaderPlugin is included in the plugins array.

```javascript
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            isCustomElement: tag => tag.startsWith('my-')
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
```

--------------------------------

### CSS Module Usage in .vue File

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/12-css-modules.md

Example demonstrating how to use a custom CSS module name ('classes') in a .vue file and access its properties within the script.

```vue
<style module="classes">
.container { color: red; }
</style>

<script>
export default {
  computed: {
    containerClass() {
      return this.$style.container  // Error! 
      return this.classes.container // Correct!
    }
  }
}
</script>
```

--------------------------------

### Basic Webpack Configuration for Vue Loader

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/README.md

This snippet shows the essential Webpack configuration to enable Vue Loader and its plugin. Ensure you have `vue-loader` and `vue-loader-plugin` installed.

```javascript
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
```

--------------------------------

### Install VueLoaderPlugin in Webpack Config

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/03-vue-loader-plugin.md

This is a required step for vue-loader to work correctly. Ensure the plugin is included in your webpack configuration's plugins array.

```javascript
// This is required for vue-loader to work
plugins: [new VueLoaderPlugin()]
```

--------------------------------

### genHotReloadCode

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/11-hot-reload.md

Generates the HMR setup code injected at the end of the compiled component module. It handles creating or reloading component records and accepting template updates.

```APIDOC
## genHotReloadCode

### Description
Generates the HMR setup code injected at the end of the compiled component module. This function is crucial for enabling hot module replacement in Vue.js applications.

### Method
```typescript
function genHotReloadCode(id: string, templateRequest: string | undefined): string
```

### Parameters
#### Path Parameters
- **id** (string) - Required - Component scope ID (8-character hex hash)
- **templateRequest** (string) - Optional - Webpack request string for template block, undefined if no template

### Response
#### Success Response
- **string** - JavaScript code string to inject into module

### Generated Code Example (with template)
```javascript
/* hot reload */
if (module.hot) {
  __exports__.__hmrId = "a1b2c3d4"
  const api = __VUE_HMR_RUNTIME__
  module.hot.accept()
  if (!api.createRecord('a1b2c3d4', __exports__)) {
    api.reload('a1b2c3d4', __exports__)
  }
  module.hot.accept("!vue-loader!./App.vue?vue&type=template", () => {
    api.rerender('a1b2c3d4', render)
  })
}
```

### Generated Code Example (without template)
```javascript
/* hot reload */
if (module.hot) {
  __exports__.__hmrId = "a1b2c3d4"
  const api = __VUE_HMR_RUNTIME__
  module.hot.accept()
  if (!api.createRecord('a1b2c3d4', __exports__)) {
    api.reload('a1b2c3d4', __exports__)
  }
}
```
```

--------------------------------

### Common Webpack and Vue SFC Type Imports

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/14-types-reference.md

Illustrates a common pattern for importing various types from 'webpack' and 'vue/compiler-sfc' modules. This setup is typical in vue-loader files for type safety.

```typescript
import type {
  LoaderContext,
  Compiler,
  RuleSetRule,
} from 'webpack'

import type {
  SFCDescriptor,
  SFCBlock,
  SFCScriptBlock,
  TemplateCompiler,
  CompilerOptions,
  SFCTemplateCompileOptions,
  SFCScriptCompileOptions,
  CompilerError,
} from 'vue/compiler-sfc'

import type { LoaderDefinitionFunction } from 'webpack'

import type { VueLoaderOptions } from './index'
```

--------------------------------

### Generated CSS Modules Code With Custom Module Name

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/12-css-modules.md

This example demonstrates how Vue Loader generates code for CSS modules when a custom module name is specified instead of the default '$style'. The import request includes the custom name, and the assignment uses this name as the key.

```javascript
import style0 from 'foo.vue?vue&type=style&index=0&module=foo'
cssModules["foo"] = style0
```

--------------------------------

### Configuration Options Table

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/02-vue-loader-options.md

A detailed table listing each configuration option, its type, requirement, default value, and a description.

```APIDOC
## Configuration Options

| Option | Type | Required | Default | Description |
|---|---|---|---|---|
| babelParserPlugins | string[] | No | [] | Babel parser plugins to enable for parsing `<script>` blocks. Passed directly to `@vue/compiler-sfc`. Example: `['jsx', 'classProperties']` |
| transformAssetUrls | boolean | Record<string, string[]> | No | true | Enable/customize asset URL transformation in templates. When true, URLs in `src`, `href`, `srcset` attributes are treated as module requests |
| compiler | TemplateCompiler | string | No | auto-resolved | Custom Vue compiler instance or path to compiler module. If string, loaded via require(). Used for template and style compilation |
| compilerOptions | CompilerOptions | No | {} | Options passed to the Vue compiler. Includes `isCustomElement`, `expressionPlugins`, etc. See `@vue/compiler-sfc` documentation |
| reactivityTransform | boolean | No | false | **Deprecated** in v17. Enable Vue Reactivity Transform (`<script setup>` ref auto-unwrapping). Will be removed in v18 |
| propsDestructure | boolean | No | false | **Experimental** Enable destructuring assignment in `<script setup>` props. Converts `defineProps({ foo: String })` usage to destructured parameters |
| defineModel | boolean | No | false | **Experimental** Enable `defineModel()` macro in `<script setup>` for v-model support |
| customElement | boolean | RegExp | No | `/\.ce\.vue$/` | Enable custom element mode. When enabled, component `<style>` tags are inlined as strings in the `styles` array. When RegExp, matched against filename. When boolean true, applies to all .vue files |
| hotReload | boolean | No | true | Enable hot module reloading (HMR) during development. Automatically disabled in production and SSR builds |
| exposeFilename | boolean | No | false | Expose component filename in `__file` property in production builds (for debugging). In development, filename is always exposed |
| appendExtension | boolean | No | false | Append language extension to the resourcePath when processing individual blocks. Used for better source map support |
| enableTsInTemplate | boolean | No | true | Allow TypeScript expressions in templates when `<script>` has `lang="ts"`. When used with `ts-loader`, set to false to avoid cache invalidation issues. Works better with `esbuild-loader` |
| experimentalInlineMatchResource | boolean | No | false | **Webpack 5+ only, experimental** Enable inline matchResource syntax for rule matching. Improves rule resolution for vue blocks. Requires Webpack 5.0.0+. When enabled with `experiments.css`, HMR for CSS works correctly |
| isServerBuild | boolean | No | false (auto-detect) | Mark build as SSR (server-side rendering). When true, templates are compiled to `ssrRender()` functions. Defaults to target === 'node' |
```

--------------------------------

### Configure Server-Side Rendering (SSR)

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Set the target to 'node' or use options to enable server-side rendering. SSR builds have different asset handling and do not include interactive features.

```javascript
target: 'node'
```

```javascript
options: { isServerBuild: true }
```

--------------------------------

### TypeScript Interface for Error Location

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/13-misc-utilities.md

Defines the structure for location information within an error object, including start and end positions.

```typescript
interface Location {
  start: Position
  end: Position
}

interface Position {
  line: number      // 1-based line number
  column: number    // 0-based column number
  offset: number    // 0-based character offset in source
}
```

--------------------------------

### Resolve Script for TemplateLoader

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/08-resolve-script.md

Called by templateLoader to get binding metadata for template expressions. It resolves the script and passes its bindings to the template compiler.

```typescript
const script = resolveScript(descriptor, query.id as string, options, loaderContext)
const compiled = compileTemplate({
  // ...
  bindingMetadata: script ? script.bindings : undefined,
  // ...
})
```

--------------------------------

### getOptions

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Retrieves loader options from the webpack loader context. It handles options provided via string query, object query, or no query, returning parsed loader options or an empty object.

```APIDOC
## getOptions

### Description
Retrieves loader options from webpack loader context.

### Signature
```typescript
function getOptions(loaderContext: LoaderContext<VueLoaderOptions>): VueLoaderOptions
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **loaderContext** (LoaderContext) - Required - Webpack loader context

### Returns
`VueLoaderOptions` — Parsed loader options or empty object

### Handles multiple formats
1. **String query** (webpack 4 style):
   ```javascript
   ?{...options}
   ?option1=value1&option2=value2
   ```
   Parsed by `parseQuery()`

2. **Object query** (webpack 5 style):
   ```javascript
   loader.options = { ... }
   ```
   Returned directly

3. **No query**: Returns empty object `{}`
```

--------------------------------

### Basic vue-loader Configuration

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/02-vue-loader-options.md

Configure webpack to use vue-loader for .vue files.

```javascript
// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}
```

--------------------------------

### Check Relative Path

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Checks if a given string is a relative file path. Returns true for paths starting with './', '../', '.\', or '..\'.

```typescript
function isRelativePath(str: string): boolean
```

--------------------------------

### Vue Loader File Organization

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Overview of the main files and their purposes within the Vue Loader project structure.

```tree
src/
  index.ts                 — Main loader
  plugin.ts               — Plugin dispatcher
  pluginWebpack5.ts       — Webpack 5+ plugin
  pluginWebpack4.ts       — Webpack 4 plugin
  select.ts               — Block selection/extraction
  templateLoader.ts       — Template compilation
  pitcher.ts              — Request routing/interception
  stylePostLoader.ts      — Scoped CSS transformation
  styleInlineLoader.ts    — Style inlining for custom elements
  resolveScript.ts        — Script compilation and caching
  descriptorCache.ts      — Parse result caching
  hotReload.ts            — HMR code generation
  cssModules.ts           — CSS modules code generation
  util.ts                 — Utility functions
  formatError.ts          — Error formatting
  exportHelper.ts         — Component property export helper
  compiler.ts             — Vue compiler import with fallback
  shim.d.ts              — Type declarations
```

--------------------------------

### Parse Resource Query Parameters

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/14-types-reference.md

Demonstrates parsing the resource query string using qs.parse to extract parameters like type, id, index, and scoped status. The resourceQuery slice(1) removes the leading '?'.

```typescript
const query = qs.parse(loaderContext.resourceQuery.slice(1))
const type = query.type      // 'template' | 'script' | 'style' | 'custom'
const id = query.id          // scope ID
const index = query.index    // block index for styles/custom blocks
const scoped = query.scoped  // 'true' | undefined
```

--------------------------------

### Vue Loader with Custom SFC Compiler

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/README.md

This configuration demonstrates how to use a custom compiler with `vue-loader`, such as `@vue/compiler-sfc`, and provides custom options like `isCustomElement`.

```javascript
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    compiler: require('@vue/compiler-sfc'),
    compilerOptions: {
      isCustomElement: tag => tag.startsWith('my-')
    }
  }
}
```

--------------------------------

### Generate Hot Reload Code for Vue Components

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/11-hot-reload.md

Generates the HMR setup code injected at the end of a compiled component module. Use this to enable hot module reloading for Vue components.

```typescript
function genHotReloadCode(
  id: string,
  templateRequest: string | undefined
): string
```

--------------------------------

### Set Production Build Mode

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Use 'production' mode for optimized and minified output. This mode is intended for deployment and does not include HMR.

```javascript
mode: 'production'
```

--------------------------------

### Check if Template Can Be Inlined

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/08-resolve-script.md

Determines if a component's template can be inlined directly into the script block for performance optimization. This is applicable only in production builds when using `<script setup>` and the template is not external or processed by a preprocessor.

```typescript
function canInlineTemplate(descriptor: SFCDescriptor, isProd: boolean): boolean
```

--------------------------------

### Configure Vue Loader with Webpack

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Set up webpack.config.js to use vue-loader and VueLoaderPlugin. Ensure other necessary loaders like babel-loader and css-loader are also configured.

```javascript
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // VueLoaderOptions
        }
      },
      // Other rules (babel-loader, css-loader, etc.)
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
```

--------------------------------

### Get SFC Descriptor from Cache or Disk

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/10-descriptor-cache.md

Retrieves a parsed SFC descriptor from the cache. If the descriptor is not found in the cache (cache miss), it reads the file from disk, parses it, stores it in the cache, and then returns it. This fallback is crucial for multi-threaded builds.

```typescript
function getDescriptor(
  filename: string,
  compilerOptions?: CompilerOptions
): SFCDescriptor
```

```typescript
const { descriptor } = parse(source, {
  filename,
  sourceMap: true,
  templateParseOptions: compilerOptions,
})
```

--------------------------------

### Module Augmentation for Loader Context

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/14-types-reference.md

Shows how a plugin can augment the loader context at runtime to indicate initialization.

```typescript
// In plugin, at runtime:
loaderContext[VueLoaderPlugin.NS] = true
```

--------------------------------

### Template Loader Options

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Shows how to merge default options with resolved template TypeScript options for the compiler.

```typescript
const compilerOptions = {
  ...options.compilerOptions,
  ...resolveTemplateTSOptions(descriptor, options),
}
```

--------------------------------

### CSS Module Query Parameters

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/12-css-modules.md

Use the 'module' query parameter to specify CSS module behavior. 'true' uses the default '$style' name, while a string value assigns a custom name.

```nginx
foo.vue?vue&type=style&index=0&module=true
foo.vue?vue&type=style&index=0&module=classes
```

--------------------------------

### Access CSS Modules with Composition API

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/12-css-modules.md

Demonstrates using `useCssModule` hook in Vue 3's Composition API to access CSS module classes, with an optional argument for custom module names.

```vue
<script setup>
import { useCssModule } from 'vue'
const styles = useCssModule()
// or
const styles = useCssModule('custom')
</script>

<template>
  <div :class="styles.container">
    <!-- uses CSS class name from styles.container -->
  </div>
</template>

<style module>
.container { color: red; }
</style>
```

--------------------------------

### Webpack Expanded Request with Pitching Loader for Template

Source: https://github.com/vuejs/vue-loader/blob/main/README.md

Demonstrates how vue-loader's pitching loader intercepts template block requests and injects necessary loaders like template-loader and pug-loader.

```javascript
import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'

```

--------------------------------

### vue-loader with Custom Compiler Options

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/02-vue-loader-options.md

Pass custom options to the template compiler, such as defining custom elements.

```javascript
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    compilerOptions: {
      isCustomElement: tag => tag.startsWith('ion-')
    }
  }
}
```

--------------------------------

### Multiple CSS Modules with Custom Names

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/12-css-modules.md

Demonstrates how to define and use multiple CSS modules within a single Vue component, each with a distinct name for its class scope.

```vue
<style module="ui">
.button { ... }
</style>

<style module="theme">
.dark { ... }
</style>

<script setup>
const ui = useCssModule('ui')
const theme = useCssModule('theme')
</script>
```

```javascript
const cssModules = {}
import style0 from '...'
cssModules["ui"] = style0
import style1 from '...'
cssModules["theme"] = style1
```

--------------------------------

### Vue SFC Query String Formats

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Details the various query string formats used to request specific blocks (template, script, style, custom) from a .vue file.

```plaintext
?vue&type=template&id=<hash>&scoped=true — Template block
?vue&type=script&lang=ts — Script block
?vue&type=style&index=0&id=<hash>&module=true — Style block
?vue&type=custom&index=0&blockType=i18n — Custom block
```

--------------------------------

### resolveTemplateTSOptions

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Prepares TypeScript options for template compilation. It returns TypeScript compiler options or null if TypeScript is disabled in templates. It checks for `lang="ts"` or `lang="tsx"` in the script and updates expression plugins.

```APIDOC
## resolveTemplateTSOptions

### Description
Prepares TypeScript options for template compilation.

### Signature
```typescript
function resolveTemplateTSOptions(descriptor: SFCDescriptor, options: VueLoaderOptions): CompilerOptions | null
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **descriptor** (SFCDescriptor) - Required - Parsed SFC descriptor
- **options** (VueLoaderOptions) - Required - Loader configuration

### Returns
`CompilerOptions | null` — TypeScript compiler options or null if disabled

### Logic
1. Returns null if `enableTsInTemplate` is false
2. Checks if script has `lang="ts"` or `lang="tsx"`
3. Adds 'typescript' to expression plugins if needed
4. Returns object with `isTS` and updated `expressionPlugins`

### Example output
```typescript
{
  isTS: true,
  expressionPlugins: ['typescript', 'jsx']
}
```

### Usage
Called by templateLoader and resolveScript to enable TS syntax in templates.
```

--------------------------------

### Generic Type Parameter for Loader Options

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/14-types-reference.md

Illustrates using a generic type parameter to specify the type of options a loader accepts.

```typescript
function getOptions(
  loaderContext: LoaderContext<VueLoaderOptions>
): VueLoaderOptions
```

--------------------------------

### Vue SFC Processing Pipeline

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Illustrates the flow of a .vue file through the vue-loader processing pipeline, from input to final component export.

```plaintext
.vue file input
    ↓
parse() — @vue/compiler-sfc parses into SFCDescriptor
    ↓
selectBlock() — Extracts individual blocks for requestQuery
    ↓
Router by type:
  • template → templateLoader → render function
  • script → resolveScript → compiled script (handles <script setup>)
  • style → stylePostLoader → scoped CSS transformation
  • custom → custom loaders
    ↓
Assembly — Main loader combines all blocks into component
    ↓
export default component
```

--------------------------------

### Set Development Build Mode

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Use 'development' mode for features like HMR and full source maps. This mode is suitable for active development cycles.

```javascript
mode: 'development'
```

--------------------------------

### Style Block Handling

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/04-select-block.md

Handles requests for a specific style block by its index, returning its raw content and source map.

```typescript
if (query.type === `style` && query.index != null) {
  const style = descriptor.styles[Number(query.index)]
  loaderContext.callback(null, style.content, style.map as any)
}
```

--------------------------------

### Initialize CSS Modules Object

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/12-css-modules.md

In the main loader (`index.ts`), this code initializes the `cssModules` object if CSS modules are detected and not already initialized.

```typescript
if (!hasCSSModules) {
  stylesCode += `\nconst cssModules = {}`
  propsToAttach.push([`__cssModules`, `cssModules`])
  hasCSSModules = true
}
```

--------------------------------

### Webpack Expanded Request with Pitching Loader for Style

Source: https://github.com/vuejs/vue-loader/blob/main/README.md

Shows the expanded Webpack request for a scoped SCSS style block, including the injection of vue-loader's style-post-loader by the pitching loader.

```javascript
import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

```

--------------------------------

### Descriptor Cache Usage in Main Loader

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/10-descriptor-cache.md

Demonstrates how the main Vue-loader parses a .vue file and stores its descriptor in the cache. Later, the descriptor is retrieved from the cache for processing specific blocks like scripts or templates.

```typescript
// After parsing
const { descriptor, errors } = parse(source, { ... })
setDescriptor(filename, descriptor)

// Later in selectBlock
if (incomingQuery.type) {
  return selectBlock(descriptor, ...) // Uses parsed descriptor
}
```

--------------------------------

### Custom Block Handling

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/04-select-block.md

Handles requests for a custom block by its index, returning its raw content and source map.

```typescript
if (query.type === 'custom' && query.index != null) {
  const block = descriptor.customBlocks[Number(query.index)]
  loaderContext.callback(null, block.content, block.map as any)
}
```

--------------------------------

### Compiler

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/14-types-reference.md

Represents the Webpack compiler instance, providing access to the compiler's options and hooks.

```APIDOC
## Compiler

Webpack compiler instance.

### Properties

- **webpack** (any) - Potentially the webpack version or related information.
- **options** (Configuration) - The Webpack configuration object.
- **hooks** (CompilerHooks) - Webpack compiler hooks for extensibility.
```

--------------------------------

### Property Attachment in Vue Loader

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/13-misc-utilities.md

Demonstrates how properties like `__scopeId` and `__file` are collected and attached to the component script using the `exportHelper` function.

```typescript
const propsToAttach: [string, string][] = []

// Collect properties
if (hasScoped) {
  propsToAttach.push([`__scopeId`, `"data-v-${id}"`])
}

propsToAttach.push([`__file`, JSON.stringify(filename)])

// Generate attachment code
if (!propsToAttach.length) {
  code += `

const __exports__ = script;`
} else {
  code += `

import exportComponent from ${stringifyRequest(exportHelperPath)}
`
  code += `const __exports__ = /*#__PURE__*/exportComponent(script, [${propsToAttach.map(([key, val]) => `['${key}',${val}]`).join(',')}])`
}
```

--------------------------------

### StyleInlineLoader Behavior

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/07-style-loaders.md

Illustrates the simple transformation performed by StyleInlineLoader, which wraps the input CSS source in a JavaScript export using JSON.stringify.

```typescript
`export default ${JSON.stringify(source)}`
```

--------------------------------

### vue-loader with TypeScript in Templates

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/02-vue-loader-options.md

Enable TypeScript support within Vue templates and configure Babel parser plugins.

```javascript
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    enableTsInTemplate: true,
    babelParserPlugins: ['typescript']
  }
}
```

--------------------------------

### Initialize Type Dependency Map

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/08-resolve-script.md

Initializes a map to store type dependencies for HMR. The key is the file path of the type dependency, and the value is a set of SFC file paths that import from it.

```typescript
export const typeDepToSFCMap = new Map<string, Set<string>>()
```

--------------------------------

### Vue Compiler Error Formatting

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/13-misc-utilities.md

Demonstrates how formatError provides readable error messages for template parsing failures, improving the developer experience compared to raw compiler output.

```javascript
// If template parsing fails, user sees:
VueCompilerError: Unexpected closing tag `span>`

at src/Button.vue:3:5

2  | <template>
3  |   <div><span></div>
     |              ^
4  | </template>
```

--------------------------------

### Webpack Expanded Request for Script Block

Source: https://github.com/vuejs/vue-loader/blob/main/README.md

Illustrates how Webpack expands a request for a Vue SFC script block, including applying configured loaders like babel-loader, due to VueLoaderPlugin's modifications.

```javascript
import script from 'source.vue?vue&type=script'

```

```javascript
import script from 'babel-loader!vue-loader!source.vue?vue&type=script'

```

--------------------------------

### Vue SFC Main Loader Output

Source: https://github.com/vuejs/vue-loader/blob/main/README.md

This code represents the output of the main vue-loader for a '.vue' file, showing how different blocks are imported as virtual modules with specific query parameters.

```javascript
// code returned from the main loader for 'source.vue'

// import the <template> block
import render from 'source.vue?vue&type=template'
// import the <script> block
import script from 'source.vue?vue&type=script'
export * from 'source.vue?vue&type=script'
// import <style> blocks
import 'source.vue?vue&type=style&index=1'

script.render = render
export default script

```

--------------------------------

### genRequest

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/06-pitcher.md

Constructs the actual webpack request string with loader chain. This function is essential for building the correct module request paths within Webpack.

```APIDOC
## genRequest

### Description
Constructs the actual webpack request string with loader chain.

### Signature
```typescript
function genRequest(
  loaders: (Loader | string)[],
  lang: string,
  context: LoaderContext<VueLoaderOptions>
): string
```

### Parameters
#### Path Parameters
- **loaders** ( (Loader | string)[] ) - Required - Array of loaders to chain
- **lang** ( string ) - Required - Language for inline match resource
- **context** ( LoaderContext ) - Required - Webpack loader context

### Returns
Stringified webpack request with loaders

**Format (without inline match resource):**
```
-!loader1!loader2!./resource.vue?vue&type=...
```

**Format (with inline match resource):**
```
./resource.vue.js!=!-!loader1!loader2!./resource.vue?vue&...
```
```

--------------------------------

### Generate Proxy Module for Loaders

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/06-pitcher.md

Used to generate a proxy module for a given set of loaders, context, and query parameters. It handles scoped CSS transformation and style trimming.

```typescript
return genProxyModule(
  [...afterLoaders, stylePostLoaderPath, ...beforeLoaders],
  context,
  !!query.module || query.inline != null,
  (query.lang as string) || 'css'
)
```

--------------------------------

### Prepare TypeScript options for template compilation

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Resolves TypeScript compiler options for SFC template compilation. Returns null if 'enableTsInTemplate' is false. Adds 'typescript' to expression plugins if the script has lang="ts" or lang="tsx".

```typescript
function resolveTemplateTSOptions(
  descriptor: SFCDescriptor,
  options: VueLoaderOptions
): CompilerOptions | null {
  // ... logic to determine options ...
  return {
    isTS: true,
    expressionPlugins: ['typescript', 'jsx']
  }
}
```

--------------------------------

### VueLoaderOptions Interface Definition

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/02-vue-loader-options.md

Defines the structure for VueLoaderOptions, specifying available configuration properties and their types.

```typescript
interface VueLoaderOptions {
  babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
  transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
  compiler?: TemplateCompiler | string
  compilerOptions?: CompilerOptions
  reactivityTransform?: boolean
  propsDestructure?: boolean
  defineModel?: boolean
  customElement?: boolean | RegExp
  hotReload?: boolean
  exposeFilename?: boolean
  appendExtension?: boolean
  enableTsInTemplate?: boolean
  experimentalInlineMatchResource?: boolean
  isServerBuild?: boolean
}
```

--------------------------------

### Scoped Style Processing Flow

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/07-style-loaders.md

Diagram illustrating the processing steps for scoped CSS in normal Vue-loader mode, from raw CSS to injected DOM styles.

```text
raw CSS
  ↓
pitcher (detects scoped style)
  ↓
stylePostLoader (adds data-v-id)
  ↓
css-loader (converts to JS module)
  ↓
style-loader (injects into DOM)
  ↓
component code: import 'styles.vue?...'
```

--------------------------------

### Registering the Pitcher Loader

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/06-pitcher.md

This code defines the configuration for the pitcher loader, specifying its path and a resource query function to intercept Vue block requests. It ensures that the pitcher is applied to all requests where the query parameter 'vue' is present.

```typescript
const pitcher = {
  loader: require.resolve('./pitcher'),
  resourceQuery: (query?: string) => {
    if (!query) return false
    const parsed = qs.parse(query.slice(1))
    return parsed.vue != null
  },
  options: vueLoaderOptions,
}
```

--------------------------------

### vue-loader for Server-Side Rendering (SSR)

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/02-vue-loader-options.md

Configure vue-loader for server-side rendering builds, disabling hot reloading.

```javascript
// SSR build
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    isServerBuild: true,
    hotReload: false
  }
}
```

--------------------------------

### Retrieve loader options from webpack context

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Fetches loader options from the webpack loader context, supporting both string query (webpack 4) and object query (webpack 5) formats. Returns an empty object if no options are found.

```typescript
function getOptions(
  loaderContext: LoaderContext<VueLoaderOptions>
): VueLoaderOptions {
  // ... logic to parse options from query or loaderContext.options ...
  return {}
}
```

--------------------------------

### Script Block Handling

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/04-select-block.md

Handles requests for the script block by resolving it using `resolveScript` and returning its content and source map.

```typescript
if (query.type === `script`) {
  const script = resolveScript(descriptor, scopeId, options, loaderContext)!
  loaderContext.callback(null, script.content, script.map as any)
}
```

--------------------------------

### Template Block Handling

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/04-select-block.md

Handles requests for the template block by extracting its content and source map.

```typescript
if (query.type === `template`) {
  loaderContext.callback(null, template.content, template.map as any)
}
```

--------------------------------

### Custom CSS Module Name

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/12-css-modules.md

When `moduleName` is provided as a string, that string will be used as the module name.

```typescript
const name = moduleName
```

--------------------------------

### Custom Compiler Resolution

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/08-resolve-script.md

Allows using custom Vue compiler versions by resolving the compiler from options. It can be a string path or a direct module.

```typescript
let templateCompiler: TemplateCompiler | undefined
if (typeof options.compiler === 'string') {
  templateCompiler = require(options.compiler)
} else {
  templateCompiler = options.compiler
}
```

--------------------------------

### exportHelper Function Signature

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/13-misc-utilities.md

Defines the signature of the `exportHelper` function, which takes a component script and an array of key-value properties to attach.

```typescript
export default (sfc: any, props: [string, string][]): any
```

--------------------------------

### Generate Match Resource Request

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/09-utility-functions.md

Generates a request string for a matched resource, typically used for inline resources like templates or styles. Includes stringification for use in module resolution.

```typescript
const request = genMatchResource(
  this,
  resourcePath,
  `?vue&type=template`,
  'ts'
)
const stringified = stringifyRequest(this, request)
```

--------------------------------

### getDescriptor

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/10-descriptor-cache.md

Retrieves a cached SFC descriptor or parses from disk if a cache miss occurs. It normalizes the filename, checks the cache, and if not found, reads the file from disk, parses it, stores it in the cache, and then returns it. This is crucial for multi-threaded builds where the cache is not shared.

```APIDOC
## getDescriptor

### Description
Retrieves a cached SFC descriptor or parses from disk if cache miss.

### Parameters
#### Path Parameters
- **filename** (string) - Required - File path, may include query string
- **compilerOptions** (CompilerOptions) - Optional - Vue compiler options for parsing

### Returns
`SFCDescriptor` — Parsed SFC descriptor

### Returns from cache if available
1. Normalizes filename
2. Checks if descriptor exists in cache
3. Returns cached descriptor if found

### Disk fallback if cache miss
1. Reads file from disk via `fs.readFileSync(filename, 'utf-8')`
2. Parses with `@vue/compiler-sfc` parse function:
   ```typescript
   const { descriptor } = parse(source, {
     filename,
     sourceMap: true,
     templateParseOptions: compilerOptions,
   })
   ```
3. Stores in cache for future access
4. Returns descriptor

### Why disk fallback needed
- When vue-loader runs in multiple threads (e.g., with thread-loader)
- Each thread has its own Node.js runtime and memory space
- Cache from main thread is not shared with worker threads
- Disk fallback ensures correctness at cost of re-parsing

### Error handling
- Re-parsing errors from `parse()` are not caught
- Will propagate as webpack build errors
- This is intentional to surface parsing issues early
```

--------------------------------

### Vue Loader Production Build Configuration

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/README.md

Settings for `vue-loader` optimized for production builds. This includes options to expose filenames and disable Hot Module Replacement (HMR).

```javascript
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    exposeFilename: true,  // Optional: expose filenames in prod
    hotReload: false       // Disable HMR
  }
}
```

--------------------------------

### Enable Source Maps in Webpack

Source: https://github.com/vuejs/vue-loader/blob/main/_autodocs/00-index.md

Configure webpack to generate source maps for easier debugging. This is typically set in your webpack configuration file.

```javascript
devtool: 'source-map'
```