Writing Vue component using JSX blocks.

Overview

jue

NPM version NPM downloads Build Status donate

Install

You will need the jue runtime and babel-preset-vue for transforming Jue JSX:

yarn add jue
yarn add babel-preset-jue --dev

Configure .babelrc:

{
  "presets": ["jue"]
}

Example

In:

const Counter = <Component>
  <Data>{function () {
    return { count: 0 }
  }}</Data>

  <Method>{function handleClick() {
    this.count++
  }}</Method>

  <Template>{`
    <button @click="handleClick">{{ count }}</button>
  `}</Template>
</Component>

Out:

const Counter = {
  data() {
    return { count: 0 }
  },
  methods: {
    handleClick() {
      this.count++
    }
  },
  template: `<button @click="handleClick">{{ count }}</button>`
}

Alternatively, you can use Vue JSX with Jue JSX! For example in render function:

const Counter = <Component>
  <Data>{function () {
    return { count: 0 }
  }}</Data>

  <Method>{function handleClick() {
    this.count++
  }}</Method>

  <Render>{function () {
    return <button onClick={this.handleClick}>{this.count}</button>
  }}</Render>
</Component>

Tips

For methods and computed whose value should be an object, you can define its name via function name or component prop:

<Method>{function handleClick() {
  this.count++
}}</Method>

Is equivalent to:

<Method name="handleClick">{function () {
  this.count++
}}</Method>

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

jue © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @_egoistlily

You might also like...
It is easy vue todo app, using vuex to store the data. It is developed using element.ui.

todo-app It is an easy project to practice the integration between vue, vuex and Element.ui. Demo: https://oussamaalouat.github.io/vue-todo-app/ Proje

Sparks bank App is a simple web application built using Vue js, HTML , CSS and firebase data base using fetch to get or post or delete data
Sparks bank App is a simple web application built using Vue js, HTML , CSS and firebase data base using fetch to get or post or delete data

spark-bank 📝 Table of Contents About Description Project setup ScreenShots Video Website link Contributors About sparks bank App is a simple web appl

Easy implementation of real-time communication using WebRTC by using Firebase

Easy implementation of real-time communication using WebRTC by using Firebase

StudyNet (Online study platform) built using Django and VueJSStudyNet built using Django and VueJS
StudyNet (Online study platform) built using Django and VueJSStudyNet built using Django and VueJS

StudyNet (Online study platform) Next project built by using Django and VueJS. Best practical project to enhance the both frontend and backend skills.

A simple app using Firebase Auth to authenticate users, and using Vuex to manage state.

Firebase Auth for Vite This project was created with Vite. This is a simple app using Firebase Auth to authenticate users, and using Vuex to manage st

Component Library for Flock using Vue.js

Flock Components for VueJS Installation and Usage: Just use npm install --save @flockos/vue-components Now you can include the scripts by using follow

A tiny timeago component for Vue 3 using date-fns v2.27.

⏳ vue-timeago3 A time ago component for Vue.js 3 based on vue-timeago for Vue 2 by egoist. Table of Contents About Usage Installation Register Plugin

Vue-techno-courses - A simple SPA project using vue and vue-vouter

vue-techno-courses A simple SPA project using vue and vue-vouter. Project setup

Meals App using Vue.js 2, Vuetify, Vuex, Vue-Router & Axios.

Meals App using Vue.js 2, Vuetify, Vuex, Vue-Router & Axios.

Comments
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)
    • packages/babel-plugin-jue-require/package.json (npm)
    • packages/babel-plugin-transform-jue-jsx/package.json (npm)
    • packages/babel-preset-jue/package.json (npm)
    • packages/jue/package.json (npm)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Enable Renovate Dependency Dashboard creation
    • If semantic commits detected, use semantic commit type fix for dependencies and chore for all others
    • Ignore node_modules, bower_components, vendor and various test/tests directories
    • Autodetect whether to pin dependencies or maintain ranges
    • Rate limit PR creation to a maximum of two per hour
    • Limit to maximum 10 open PRs at any time
    • Group known monorepo packages together
    • Use curated list of recommended non-monorepo package groupings
    • A collection of workarounds for known problems with packages

    🔡 Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.


    What to Expect

    With your current configuration, Renovate will create 18 Pull Requests:

    Pin dependencies
    Update dependency babel-helper-vue-jsx-merge-props to v2.0.3
    Update babel monorepo
    Update dependency bili to v0.19.0
    • Schedule: ["at any time"]
    • Branch name: renovate/bili-0.x
    • Merge into: master
    • Upgrade bili to 0.19.0
    Update dependency eslint-config-rem to v3.2.2
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-config-rem-3.x
    • Merge into: master
    • Upgrade eslint-config-rem to 3.2.2
    Update dependency lerna to v2.11.0
    • Schedule: ["at any time"]
    • Branch name: renovate/lerna-monorepo
    • Merge into: master
    • Upgrade lerna to 2.11.0
    Update dependency vue to v2.6.14
    • Schedule: ["at any time"]
    • Branch name: renovate/vue-monorepo
    • Merge into: master
    • Upgrade vue to 2.6.14
    Update dependency xo to v0.50.0
    • Schedule: ["at any time"]
    • Branch name: renovate/xo-0.x
    • Merge into: master
    • Upgrade xo to 0.50.0
    Update dependency babel-loader to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/major-babel-monorepo
    • Merge into: master
    • Upgrade babel-loader to 8.2.5
    Update dependency bili to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/bili-5.x
    • Merge into: master
    • Upgrade bili to 5.0.5
    Update dependency chai to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/chai-4.x
    • Merge into: master
    • Upgrade chai to 4.3.6
    Update dependency eslint to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-8.x
    • Merge into: master
    • Upgrade eslint to 8.18.0
    Update dependency eslint-config-rem to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-config-rem-4.x
    • Merge into: master
    • Upgrade eslint-config-rem to 4.0.0
    Update dependency eslint-plugin-vue to v9
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-plugin-vue-9.x
    • Merge into: master
    • Upgrade eslint-plugin-vue to 9.1.1
    Update dependency jest-cli to v28
    • Schedule: ["at any time"]
    • Branch name: renovate/major-jest-monorepo
    • Merge into: master
    • Upgrade jest-cli to 28.1.1
    Update dependency lerna to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/major-lerna-monorepo
    • Merge into: master
    • Upgrade lerna to 5.1.6
    Update dependency mocha to v10
    • Schedule: ["at any time"]
    • Branch name: renovate/mocha-10.x
    • Merge into: master
    • Upgrade mocha to 10.0.0
    Update dependency vue to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/major-vue-monorepo
    • Merge into: master
    • Upgrade vue to 3.2.37

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Single file component?

    Single file component?

    const Counter = <Component>
      <Template>{`
        <button @click="handleClick">{{ count }}</button>
      `}</Template>
    
      <Script>{{
        data() {
          return { count: 0 }
        }
      }}</Script>
    
      <Style scoped={true}>{`
        button {
          background-color: pink;
        }
      `}</Style>
    </Component>
    
    opened by egoist 0
Owner
EGOIST
Doing Open Source
EGOIST
Based on ORM technology, the SQLite database is operated by using object without writing any SQL statements.

u-sqlite Based on ORM technology, the SQLite database is operated by using object without writing any SQL statements. SQLite数据库基于ORM技术,使用对象操作,无需编写任何SQ

null 15 Sep 19, 2022
Chrome extension that blocks adult website, shames you on Discord, and then pats you on the shoulder

ChadGuard Reveal your inner chad Download for Chrome Model used nsfwjs developed by Infinite Red, Inc. Inspired by nsfw-filter Usage After adding the

The War Room 44 Dec 24, 2022
Vue-quiz - Quiz application writing in Vue.

vue-quiz Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

Tiago Neves Caitano 0 Jan 3, 2022
Vue-adopt-pets - Site for adopting pets writing in Vue.

vue-adopt-pets Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Tiago Neves Caitano 0 Jan 3, 2022
Writeray - A freelance academic writing platform that gives professionals (writers) access to jobs from clients based in Kenya

Writeray Get a constant flow of jobs no matter the season Writeray • EssaySpring

Rotiken Gisa 0 May 19, 2022
Creating .NET Core CRUD API's by just writing class files

Generate CRUD API with ODATA enabled by just writing class files First of all this is a really early Alpha, consider things with care. Currently it on

Tim Cadenbach 138 Dec 21, 2022
A very simple app for writing and storing notes online

Notepad A very simple app for writing and storing notes online. Demo https://notepad.mx Deployment Deploy this whole thing to production in three line

Shaunak Chakraborty 2 Apr 11, 2022
A tool to help with decoding of the writing system in the game TUNIC

A dictionary, text keeping and glyph decoder for TUNIC game writing

Saphire Lattice 4 Oct 17, 2022
A website to list down available paid writing opportunities for technical writers.

A website to list down available paid writing opportunities for technical writers. ??‍?? Tech Stack ??️ Installation Steps Star and Fork the Repo ?? a

Ashutosh Krishna 6 Dec 31, 2022
A rudimentary app for interactive Twitch scenes using Vue.js. It monitors your Twitch channel chat for !commands using Comfy.js (by instafluff and others), plays mp3 files, loads images, and interacts with Vue.js components.

Comfy Scenes An effects maker for Twitch streamers. This app will monitor your Twitch channel for !commands using Comfy.js (by instafluff and others).

Luke Oliff 24 Dec 2, 2022