Frameworks
-
-
-
- 
FASTAPI
QUASAR
VUE-JS
-
+
+
+ ![]()
FASTAPI
+
+ ![]()
QUASAR
+
+ ![]()
VUE-JS
+
-
-
-
- 
-
+
+
+ ![]()
+
+ + TIP: Although it is possible for extensions to + use other extensions API endpoints (such as with the Satspay and + Onchain extension), ideally an extension should only use LNbits + core + endpoints.
-
-
-
-
+ ![]()
+
+![]()
+
+
+ 
+
-
-
- - TIP: Look through -
+![]()
+Style (typography, spacing, etc)
+ Genral components (cards, buttons, popup dialogs, etc)
+ Layouts (rows/columns, flexbox)
+
- 
-Style (typography, spacing, etc)
- Genral components (cards, buttons, popup dialogs,
- etc)
- Layouts (rows/columns, flexbox)
-
+
+
+ ![]()
+
-
- 
- ![]()
-
- -
-
-
-
-
+ FASTAPIQUASARVUE-JS
-
- LNbits API is built using
- FastAPI, a high-performance, easy to code API framework.
- FastAPI auto-generates swagger UI docs for testing endpoints
- /docs
-
+ LNbits API is built using
+ FastAPI, a high-performance, easy to code API framework.
+ FastAPI auto-generates swagger UI docs for testing endpoints
+ /docs
+
+ + TIP: Although it is possible for extensions to + use other extensions API endpoints (such as with the Satspay and + Onchain extension), ideally an extension should only use LNbits + core + endpoints.
-
views.py is used for
- setting application routes:
- -
views_api.py is used
- for setting application API endpoints:-
- views.py is used for
+ setting application routes:
+ +
views_api.py is used for
+ setting application API endpoints:+
+ + LNbits uses + Quasar Framework + for frontend deisgn elements. Quasar Framework is an open-source + Vue.js based framework for building apps. +
-
- - LNbits uses - Quasar Framework - for frontend deisgn elements. Quasar Framework is an - open-source Vue.js based framework for building apps. -
+ + TIP: Look through +/template files in
+ other extensions for examples of Quasar elements being used. - - TIP: Look through -
/template files in
- other extensions for examples of Quasar elements being used. +
+ In the below example we make a dialogue popup box (box can be
+ triggered
+
+
Useful links:
+
- In the below example we make a dialogue popup box (box can
- be triggered
-
-
Useful links:
- + LNbits uses + Vue + for best-in-class, responsive and high-performance components. +
-
- - LNbits uses - Vue - for best-in-class, responsive and high-performance - components. -
+Typical example of Vue components in a frontend script:
+-
Typical example of Vue components in a frontend script:
-- -
- Content can be conditionally rendered using Vue's
- v-if:
-
-
+ Content can be conditionally rendered using Vue's
+ v-if:
+
Useful Tools
-
-
- MAGICAL G
- EXCHANGE RATES
- QR CODES
- WEBSOCKETS
-
-
-
-
-
-
-
-
-
-
- Exchange rate functions, included using +
+ MAGICAL G
+ EXCHANGE RATES
+ QR CODES
+ WEBSOCKETS
+
+
+
+
-
- 
-
+
+
+![]()
+ Exchange rate functions, included using +
+![]()
+
+
+ ![]()
+
+
+![]()
+
+
+
+
+
+
+
+
-
-
+ {% endraw %}
+
+
+ Magical G
-
- A magical "g" (ie
- this.g.user.wallets[0].inkey) is always available, with info about the user, wallets
- and extensions:
-
{% raw %}{{ g }}{% endraw %}
- Exchange rates
- - LNbits includes a handy - exchange rate function, that streams rates from 6 different sources. -
- Exchange rate API:-
- Exchange rate functions, included using +
Magical G
+
+ A magical "g" (ie
from lnbits.utils.exchange_rates import
- fiat_amount_as_satoshis:
- 
-
QR Codes
- - For most purposes use Quasar's inbuilt VueQrcode library: -
-
- - LNbits does also include a handy - - QR code enpoint -
- {% raw %} You can use via + >this.g.user.wallets[0].inkey) is always available, with info about the user, wallets and + extensions: + +{% raw %}{{ g }}{% endraw %}
+ Exchange rates
+ + LNbits includes a handy + exchange rate function, that streams rates from 6 different sources. +
+ Exchange rate API:+
+ Exchange rate functions, included using +
from lnbits.utils.exchange_rates import
+ fiat_amount_as_satoshis:+
QR Codes
+ For most purposes use Quasar's inbuilt VueQrcode library:
++ LNbits does also include a handy + + QR code enpoint +
+ {% raw %} You can use via + {{protocol + location}}{% endraw + %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:+
+
+
+
Websockets
+ + Fastapi includes a great {{protocol + location}}{% endraw - %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:websocket tool +
+ {% raw %} +
+ A few LNbits extensions also make use of a weird and useful
+ websocket/GET tool built into LNbits, such as extensions
+ Copilot and LNURLDevices
+ You can subscribe to websocket with
+ wss:{{location}}/api/v1/ws/{SOME-ID}
+ You can post to any clients subscribed to the endpoint with
+ {{protocol +
+ location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}
- 
+
+ DEMO: Hit
+ {{protocol +
+ location}}/api/v1/ws/32872r23g29/blah%20blah%20blah
+ in a different browser window to change this text to `blah
+ blah blah`.
+
+ Function used in this demo:
+ :src="`${baseUrl}/example/static/websocket-example.png`"
+ />
-
Useful links
+ Websockets
- - Fastapi includes a great - websocket tool -
- {% raw %} -
- A few LNbits extensions also make use of a weird and useful
- websocket/GET tool built into LNbits, such as extensions
- Copilot and LNURLDevices
- You can subscribe to websocket with
- wss:{{location}}/api/v1/ws/{SOME-ID}
- You can post to any clients subscribed to the endpoint with
- {{protocol +
- location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}
-
-
- DEMO: Hit
- {{protocol +
- location}}/api/v1/ws/32872r23g29/blah%20blah%20blah
- in a different browser window to change this text to
- `blah blah blah`.
-
-
- Function used in this demo:
- 
Good Practice
Coming soon...
Dev Enviroment
Coming soon...
Submission
- Coming soon...
+
+ Submission
+ (fetched from https://github.com/lnbits/lnbits-extensions)
+
+