require-extension-vue
A require hook for loading single-file vue component in Node with Browser environment.
What's it?
Electron etc.)
1. Your project is running in Node with Browser environment. (2. The expected feature you want, like runtime:
// app.vue<script>export default { // ...};</script><template> // ...</template><style> // ...</style>
;// From now on, you can import or require a single-file vue component.;// This object is what you export. (include attributes: data, computed, created etc.)// <template> will be exported in app.template as String.// <style> will be appended to document.head, if you have Browser environment.
3. Do what you like.
app;
Getting started
$ npm install --save require-extension-vue
or, You want a quick start. (use-vue)
Usage
Simple
;; app;
Config
;
#loader.style.register
Register language to compile style.
loaderstyle;
<style lang="scss"> // sass code</style>
#loader.style.set
Set a default language.
loaderstyle;
<style> // No need to Declare lang="scss" any more // sass code</style>
#loader.style.exports
Append styles to where you like.
loaderstyle;
#sync
Compile handler should return content sync, includes
<template>
,<script>
and<style>
.
async
#Deprecated, @see
API
#Register
register ( lang :
String
, handler :Function
) =>this
handler ( content :
String
, filePath :String
, index :Number
) => content :String
loader.style.register / loader.script.register / loader.template.register
#Set
set ( lang :
String
) =>this
loader.style.set / loader.script.set / loader.template.set
#Exports
exports ( handler :
Function
) =>this
handler ( style :
Element
, options :Object
) { this :Vue
} =>void
options { index :
Number
, styles :Array<Element>
, filePath :String
}
loader.style.exports
Notice
In the following case, as the import
synax like Variable Hosting
:
;loaderscript;;
The above case is equal to the following case:
;;// Your config behavior is after require, so it is not working.loaderscript;
There're two way to avoid:
You can use
require
instead ofimport
.
;loaderscript;let app = ;
Put the config behavior in one file.
;;;
// require-extension-vue-config.jslet loader = requireextensions'.vue';loaderscript;
Scoped
Support scoped
, like vue-loader
. @see
#Mind you
This feature require css-what
.
But, it is defective
. @see
If your class name includes #
(>
, etc), it can not parse to correct AST
selector.
Todo
source map
.
License
MIT