Webpack loader for Framework7 single file components
framework7-loader
is a loader for webpack that allows you to author Framework7 Router components in a format called Single-File Components:
<!-- my-page.f7.html --> <template> <div class="page">${msg}</div> </template> <script> export default () => { const msg = 'Hello world'; return $render; }; </script>
npm i framework7-loader
module.exports = { ... module: { rules: [ ... { test: /\.f7.html$/, use: [ 'babel-loader', 'framework7-loader', ], }, ... ] } ... }
Framework7 v6 single file components also support JSX:
<!-- my-page.f7.html --> <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>; };