Hello Guys,
I have created a starter template for Framework7 Vue with TypeScript and included some other features as well which I needed for my personal project.
It’s 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.
Here is the complete list of features.
Features
-
Framework7 to develop mobile, and desktop apps with a native look & feel. -
Capacitor - A cross-platform native runtime for web apps -
UnoCSS - the instant on-demand atomic CSS engine -
Use the new <script setup>syntax -
TypeScript
UnoCSS?
I have been a fan of TailwindCSS and this starter template started with that. But the whole idea of this starter template came from Vitesse by Anthony Fu. As I was testing the TypeScript setup for my own project. I thought why not create a starter template, which can help me and maybe someone else(?).
So at first I used Tailwind and then after some research as to why Vitesse is using UnoCSS, I realized that UnoCSS is pure awesomeness. Not only it can do utility-first CSS but it’s more than that. If you want to know more details. Check out this Blog post by the original author of this amazing CSS Engine.
Icons
It’s using Material Icons, Tabler Icons & Carbon Icons from UnoCSS icon presets. You can read more about it here. It’s using Iconify sets.
Let’s say, I want to use Bootstrap Icons. All I have to do is to install the Bootstrap preset.
npm i -D @iconify-json/bi
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 is included in ./src/pages/home.vue.
Why?
I have wanted to learn TypeScript for a long time but didn’t try it because of laziness and TypeScript seems like a lot of extra work to do. So during my last project, I realized the importance of type checking. That was the point, I thought that I was going to do it with my next project. And for me, there is no better way of learning than using it in a real project.
So I looked at Framework7 Cli project starter and there was no option for TypeScript. Then I looked on Forum and noticed that there are F7-Vue typings available but no starter template. And the rest I mentioned above.
Well, I’m learning TypeScript. I just started using this same template for my real project and so far it’s going well but there might be a few or many issues. I’m open to suggestions and any PR/help etc.
Thanks for the reading.
And Thanks to the all creators of these awesome tools and frameworks.
Check out the live demo