Framework7 Vue with TypeScript

This is a starter template for Framework7 created via Vite Cli.

The project structure is a little bit different from the original Framework7 Cli setup and is according to the default Vue 3 structure. It's using pages from Framework7 Tabbed layout, which is the default view for this starter template. Compiled files on build are located in the root dist directory. index.html is also in the root directory.

Features

🚀 Vue 3, Vite 3
📱 Framework7 to develop mobile, desktop apps with native look & feel.
⚡️ Capacitor - A cross-platform native runtime for web apps
🍍 State Management via Pinia
🎨 UnoCSS - the instant on-demand atomic CSS engine
😃 Use icons from any icon sets with classes
🌍 I18n ready
🔥 Use the new <script setup> syntax
💪 TypeScript

UnoCSS

The presets for UnoCSS are configured inside vite.config.ts. By default, It's using Preset Wind which is equivalent to Tailwind / Windi CSS. For Icons, it's using Material Icons, Tabler Icons & Carbon Icons presets. This is the default configuration. You can extend it by providing more presets.

Unocss({
      presets: [
        presetAttributify({ /* preset options */}),
        presetUno(), 
        presetIcons({
          extraProperties: {
            'display': 'inline-block',
            'vertical-align': 'middle',
          },
        }),
        presetWebFonts({
          provider: 'google',
          fonts: {
            sans: 'Roboto',
            mono: ['Fira Code', 'Fira Mono:400,700'],
            // custom google fonts
            lobster: 'Lobster',
            inter: 'Inter',
          },
        }),
        // ...more custom presets
      ]
    })

You can use it like this in home.vue for example.

<f7-block strong class="bg-blue-500 text-white mt-3">
    <h2 class="text-xl font-bold mb-3">UnoCSS Classes & Icons</h2>
    <p>This is an example of tabs-layout application.</p>
</f7-block>

<!-- Usage with UnoCSS Attributify preset & custom font via WebFonts preset -->
<h2 text="xl blue-500" font="bold lobster">Lobster Font Heading</h2>

<!-- An orange alarm from Material Design Icons -->
<div class="i-mdi-alarm text-orange-400 hover:text-teal-400" />
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- Bell icon from Carbon -->
<i class="i-tabler-bell" />

i18n Translation Ready

It's using the official vue-i18n translation plugin. Just add json file in ./src/locale directory. For example, zh-CN.json. And then include it in ./src/locale/index.ts file.

import zhCN from "./zh-CN.json";

const i18n = createI18n<false>({
	locale: "en-US",
	fallbackLocale: "en-US",
	messages: {
		'en-US': enUS,
		'zh-CN': zhCN,
	},
});

Language switcher drop-down select is included in ./src/pages/home.vue.

Project Setup

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit sajjadalis/f7-vue-typescript f7-vue-typescript
cd f7-vue-typescript
npm install

Checklist

When you use this template, try follow the checklist to update your info properly

Change the author name in LICENSE
Change the appId and appName in capacitor.config.json
Change the name and id for f7params in App.vue

The easiest way is to use Search (Ctrl+Shift+F) feature in VS Code. Search for app.f7vuetypescript and replace with com.yourappid. Similarly search for F7-Vue Typescript and replace with Your App Name.

And, enjoy :)

Usage

Development

npm run dev

Build

To build, run

npm run build

To builds, sync capacitor & copies to Android

npm run cap-android

To builds, sync capacitor & copies to iOS

npm run cap-ios

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar) + UnoCSS.

Customization

See

huuhait / f7-vue-typescript