Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/lit-vue
🔥 Vue SFC goodies directly in JavaScript files.
https://github.com/egoist/lit-vue
i-hope-it-works-for-you sfc vue webpack
Last synced: 2 days ago
JSON representation
🔥 Vue SFC goodies directly in JavaScript files.
- Host: GitHub
- URL: https://github.com/egoist/lit-vue
- Owner: egoist
- License: mit
- Created: 2019-01-05T16:07:27.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:38:24.000Z (about 3 years ago)
- Last Synced: 2025-01-01T12:11:08.783Z (10 days ago)
- Topics: i-hope-it-works-for-you, sfc, vue, webpack
- Language: JavaScript
- Homepage:
- Size: 192 KB
- Stars: 241
- Watchers: 5
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lit-vue
[](https://npmjs.com/package/lit-vue) [](https://npmjs.com/package/lit-vue) [](https://circleci.com/gh/egoist/lit-vue/tree/master) [](https://patreon.com/egoist) [](https://chat.egoist.moe)
**Please consider [donating](https://www.patreon.com/egoist) to this project's author, [EGOIST](#author), to show your ❤️ and support.**
## Motivation
- Use all Vue SFC features in JavaScript / TypeScript files
- Type-safe Vue templates ([#1](https://github.com/egoist/lit-vue/issues/1))
Combine `vue-loader` and `lit-vue/loader` to make the dream come to reality.
## Install
```bash
yarn add lit-vue --dev
```
## Example
Previously you can use `.vue` single-file component like this:
```vue
hello
{{ count }}
export default {
data() {
return {
count: 0
}
},
methods: {
inc() {
this.count++
}
}
}
h1 {
color: red;
}
```
Now with `lit-vue` you can use `.js` and `.ts` extensions:
```js
import { html } from 'lit-vue'
html`
hello
{{ count }}
h1 {
color: red;
}
`
export default {
data() {
return {
count: 0
}
},
methods: {
inc() {
this.count++
}
}
}
```
You might need to configure the ESLint rule: no-unused-expressions
ESLint might complain about the the html`` expression not being used when you enabled the rule: [no-unused-expressions](http://eslint.cn/docs/rules/no-unused-expressions), there're three ways to solve it:
1. Disable this rule for tagged template expression in your ESLint config
```json
{
"rules": {
"no-unused-expressions": ["error", { "allowTaggedTemplates": true }]
}
}
```
2. Or export it
```js
export const template = html`
{{ count }}
`
```
You can just assign it to a variable and export it, though the exported variable will never be used. The return value of `html` tag is always undefined.
3. Or use it as component option
```js
const template = html`
{{ count }}
`
export default {
template,
data() {
return {
count: 0
}
}
}
```
Similar to #2, this may look more natural because `template` is a legit Vue component option.
## How to use
### Use with webpack
```js
module.exports = {
module: {
rules: [
{
// Match .js .ts files
test: [/\.[jt]s$/],
// Exclude .vue.js .vue.ts files
// Since we want lit-vue to transform them into Vue SFC instead
exclude: [/\.vue.[jt]s/]
loader: 'babel-loader' // Use your desired loader
},
// Handle .vue.js .vue.ts with lit-vue/loader and vue-loader
{
test: [/\.vue.[jt]s$/],
use: [
'vue-loader',
'lit-vue/loader'
]
},
// This rule is also necessary even if you don't directly use .vue files
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
```
That's it, [all the goodies](https://vue-loader.vuejs.org/) of `.vue` SFC are available in your `.vue.js` and `.vue.ts` files now!
### Optional `` element
`` inside `html` is optional:
```js
html`
hello
`
// or
html`
hello
`
```
When using templates without `` tag, you have to use `` element to define custom blocks:
```js
html`
hello
{"en": {}}
`
// or
html`
hello
{"en": {}}
`
```
And in fact even the whole Vue template is optional in `html` tag, you can just use `` and custom blocks with render function instead:
```js
import Vue from 'vue'
import Component from 'vue-class-component'
import { html } from 'lit-vue'
html`
<style scoped>
.msg {
color: red;
}
`
@Component({
props: {
name: String
}
})
export default class Welcome extends Vue {
// computed
get message() {
return 'hello ' + this.name
}
render() {
return
{this.message}
}
}
```
### Syntax higlighting
To highlight the code inside `html` template tag, you can use following editor plugins:
- VSCode: [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html)
- Something is missing? Send a PR to add it here!
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**lit-vue** © EGOIST, Released under the [MIT](./LICENSE) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/lit-vue/contributors)).
> [Website](https://egoist.sh) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)