Custom Blocks | Vue Loader (original) (raw)

You can define custom language blocks inside *.vue files. Loaders applied for a custom block are matched based on the lang attribute of the block, the block's tag name, and the rules in your webpack config.

If a lang attribute is specified, the custom block will be matched as a file with the lang as its extension.

You can also use resourceQuery to match a rule against a custom block with no lang. For example, to match against <foo> custom blocks:

If a matching rule is found for a custom block, it will be processed; otherwise the custom block will be silently ignored.

Additionally, if the custom block exports a function as the final result after being processed by all the matching loaders, that function will be called with the component of the *.vue file as a parameter.

# Example

Here's an example of injecting the <docs> custom blocks into the component so that it's available during runtime.

In order for the custom block content to be injected, we'll write a custom loader:

Now we'll configure webpack to use our custom loader for <docs> custom blocks.

We are now able to access the <docs> block's content of imported components during runtime.