Rollup & Vite plugin to load Framework7 single file components
rollup-plugin-framework7 is a plugin for Rollup and Vite that allows you to author Framework7 Router components in a format called Single-File Components:
<!-- my-page.f7.html (or my-page.f7) --> <template> <div class="page">${msg}</div> </template> <script> export default () => { const msg = 'Hello world'; return $render; }; </script>
Install the plugin itself:
npm i rollup-plugin-framework7 --save-dev
If we use JSX component, then we also need to install Babel plugins:
npm i @rollup/plugin-babel @babel/preset-react @babel/preset-env --save-dev
Configure rollup:
const { rollup } = require('rollup'); const { babel } = require('@rollup/plugin-babel'); const framework7 = require('../lib/index'); rollup({ input: './path/to/app.js', plugins: [ // enable Framework7 plugin // it will will process .f7.html and .f7.js(x) files framework7({ emitCss: true }), // css plugin for bundling content of component styles (`<style>`) css({ output: 'app-bundle.css' }), // babel plugin if you use JSX components babel({ presets: [ '@babel/preset-react', [ '@babel/preset-env', { modules: false, }, ], ], }), ], });
Install the plugin:
npm i rollup-plugin-framework7 --save-dev
In Vite config (vite.config.js):
import framework7 from 'rollup-plugin-framework7'; export default { plugins: [framework7({ emitCss: false })], };
JSX in .f7.jsx components is compiled to Framework7's $jsx automatically, no esbuild or oxc JSX config is required (works with both Vite 8+ and older versions).
Framework7 v6 single file components also support JSX:
<!-- my-page.f7.html (or my-page.f7) --> <script> export default () => { const msg = 'Hello world'; return () => <div class="page">{msg}</div>; }; </script>
// my-page.f7.js export default () => { const msg = 'Hello world'; return () => <div class="page">{msg}</div>; };