Install Framework7 in Vue application

npm i framework7-vue

Now after installing framework7 you can start using its components and inbuilt CSS.

Minimal Layout:

<f7-card title=”Home Title” content=”This is a home page” footer=”Home Footer”>
</f7-card>

Renders To:

<div class=”card”>
    <div class=”card-header”>Home</div>
    <div class=”card-content”>This is a home page</div>
    <div class=”card-footer”>Home Footer</div>
</div>

Custom Layout:

<f7-card>
    <f7-card-header>Home</f7-card-header>
    <f7-card-content>This is a home page</f7-card-content>
    <f7-card-footer>Home Footer</f7-card-footer>
</f7-card>

In this way, we can easily use framework7 components and its CSS and it will look more attractive than others.