Support Auto Import

[scriptPilot]

Describe the solution you'd like I would like to use components and extensions without the need to import them manually on each Vue single file component. Details: https://github.com/antfu/unplugin-auto-import

Additional context Auto Import supported by other UX Frameworks, example: https://www.naiveui.com/en-US/os-theme/docs/import-on-demand Integration seems easy: https://github.com/antfu/unplugin-vue-components/tree/main/src/core/resolvers

[scriptPilot]

Solution based on Vite if somebody is isterested:

import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { camelCase } from 'camel-case'

function Framework7Resolver(componentName) {
  if (componentName.match(/^(f7-|F7)/)) {
    componentName = camelCase(componentName)
    return { name: componentName, from: 'framework7-vue' }
  }
}

export default {
  plugins: [
    vue(),    
    AutoImport({
      imports: [
        {
          'framework7-vue': [
            'f7',
            'f7Ready',
            'f7route',
            'f7router'
          ]
        }
      ]
    }),
    Components({
      resolvers: [Framework7Resolver],
    })
  ]
}

[scriptPilot]

What I wondering about is if there is a way to reduce the CSS bundle size. When I import the whole Framework7 bundle, my app built with Vite is around 1.5MB. With autoload, the size is reduced for App / View / Page / Block to 950kb.

As a comparison - Naive UI has a full size of 1.4MB but with autoload and a basic component it is only 150kb.

Some room for improvements?