-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
App Vue Component
App Vue component is the main Framework7 app component where all the Framework7 core initialization happens and where you pass all main Framework7 parameters.
App Components
There are following components included:
f7-app
App Properties
Prop | Type | Default | Description |
---|---|---|---|
params | object | Object with Framework7 parameters | |
routes | array | Array with default routes for all views. Same as params.routes so you can use this one if you feel more comfortable with such approach |
|
id | string | App element ID attribute |
Examples
Passing all parameters in params
prop
<template>
<f7-app :params="f7params">
<!-- ... -->
</f7-app>
</template>
<script>
import AboutPage from './about.vue';
import ServicesPage from './services.vue';
export default {
data() {
return {
f7params: {
name: 'My App',
id: 'com.myapp.test',
// routes
routes: [
{
path: '/about/',
component: AboutPage,
},
{
path: '/services/',
component: ServicesPage,
},
],
// ... other params
}
}
}
}
</script>
Passing routes in separate prop:
<template>
<f7-app :params="f7params" :routes="routes">
<!-- ... -->
</f7-app>
</template>
<script>
import routes from './routes';
export default {
data() {
return {
f7params: {
name: 'My App',
id: 'com.myapp.test',
// ... other params
},
// routes
routes,
}
}
}
</script>