Installation
Set up Fluxon in your project.
Prerequisites
Before installing Fluxon, ensure you have the following prerequisites:
Phoenix
v1.7 or later
LiveView
v0.20 or later
Tailwind CSS
v3.4 or later
Setting up your project
-
Add the Hex Repository
Fluxon is available as a Hex package. Follow these steps to integrate it into your Phoenix project:
-
Obtain the
FLUXON_KEY_FINGERPRINT
andFLUXON_LICENSE_KEY
from your account dashboard. -
Add the repository using the following command:
sh terminalmix hex.repo add fluxon https://repo.fluxonui.com \ --fetch-public-key $FLUXON_KEY_FINGERPRINT \ --auth-key $FLUXON_LICENSE_KEY
-
-
Install Fluxon
Once the repository is added, add Fluxon to your project dependencies:
ex mix.exs{:fluxon, "~> 1.0.0", repo: :fluxon}
Run
mix deps.get
to install the package. -
Configure Your Project
Several files need to be updated to fully integrate Fluxon into your project:
-
Update the
lib/[app_name]_web.ex
file to include the Fluxon module.ex [app_name]_web.exdefp html_helpers do quote do import Phoenix.HTML use Fluxon # ... end end
-
Modify the
assets/package.json
file to include the Fluxon JS package. If the file doesn't exist, create it.{} package.json{ "dependencies": { "fluxon": "file:../deps/fluxon" } }
-
Update
assets/tailwind.config.js
to allow TailwindCSS to process the Fluxon component classes.js tailwind.config.jsmodule.exports = { content: [ '../deps/fluxon/**/*.*ex', "./js/**/*.js", // ... ], // ... }
-
Update the
assets/js/app.js
file to include the Fluxon hooks and theonBeforeElUpdated
function.js app.jsimport { Hooks as FluxonHooks, DOM as FluxonDOM } from 'fluxon'; let liveSocket = new LiveSocket("/live", Socket, { hooks: {...Hooks, ...FluxonHooks}, dom: { onBeforeElUpdated(from, to) { FluxonDOM.onBeforeElUpdated(from, to); }, }, });
-