Framework7 Component Loader
Webpack loader for Framework7 single file router components
What is Framework7 Component Loader?
framework7-component-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 --> {{msg}} <!-- Inline partials --> {{> 'foo'}} {{> 'bar'}} <!-- External partials --> {{> 'external'}} <!-- Template7 inline partial support (optional) --> foo bar
External partial templates example (see config for location)
<!-- external.f7p.html --> External template get scope context {{msg}}
Installation
npm i framework7-component-loader
Configuration
moduleexports = ... module: rules: ... test: /\.f7.html$/ use: 'babel-loader' loader: 'framework7-component-loader' options: // path to file that exports array of Template7 helpers names helpersPath: './src/template7-helpers-list.js' // path where to look for Template7 partials partialsPath: './src/pages/' // Template7 partials file extension partialsExt: '.f7p.html' // When enabled it will minify templates HTML content minifyTemplate: true ... ...
Template7 Helpers
To use Template7 helpers, we need to specify helpers names in separate file and specify path to file in helpersPath
loader parameter. It is required because template is compiled on server side which doesn't know about helpers registered during app runtime.
So, if we use helpers named foo
and bar
in our templates, we need to register their names in file:
/* src/template7-helpers-list.js */moduleexports = 'foo' 'bar';
And specify this file in loader options:
rules: ... test: /\.f7.html$/ use: 'babel-loader' loader: 'framework7-component-loader' options: // path to file that exports array of Template7 helpers names helpersPath: './src/template7-helpers-list.js' // ... ...