Vite integration with vanilla js reloads the entire page

Questions
1

I have this vite config using ‘rollup-plugin-framework7’. But every time i make on dev it reloads the entire page instead of just the component I updated. Is this a normal behaviour or my configuration is wrong somewhere?

export default async () => {

  return  {
    plugins: [
      framework7({ emitCss: false }),
      createHtmlPlugin({
        minify: false,
        inject: {
          data: {
            TARGET: process.env.TARGET,
          },
        },
      }),
    ],
    root: SRC_DIR,
    base: '',
    publicDir: PUBLIC_DIR,
    build: {
      outDir: BUILD_DIR,
      assetsInlineLimit: 0,
      emptyOutDir: true,
      rollupOptions: {
        treeshake: false,
      },
    },
    resolve: {
      alias: {
        '@': SRC_DIR,
      },
    },
    server: {
      host: true,
    },
    esbuild: {
      jsxFactory: '$jsx',
      jsxFragment: '"Fragment"',
    },
  };
}
2

I have my routes like this

import HomePage from '../pages/home.f7';
import DiscoverPage from '../pages/discover.f7';
import {singleMedia} from "@/components/media.js";

const routes = [
  {
    path: '/',
    keepAlive: true,
    component: HomePage,
  },
  {
    path: '/discover/',
    keepAlive: true,
    component: DiscoverPage,
  },
  {
    path: "/movie/:media_id",
    async: singleMedia,
  },
3

Hi,

This behavior happens because you need to enable browserHistory in your Framework7 app.

Inside your app initialization (var app = new Framework7({ ... })), add:

view: {
  browserHistory: true,
  browserHistorySeparator: '',
},

Then, in your vite.config.js, add this to the server object:

server: {
  historyApiFallback: true
}

This setup helps Vite handle client-side routing correctly without triggering full page reloads during navigation or development.

4

Hi, thank you for your reply.

I initially disabled the browserHistory cause whenever i go back from a sub page to the main page, it doesn’t load anything on the main page. I use tabbed views

I tried the changes but still got the same issue.

This is my app.js, I added cordova during the initialization

import $ from 'dom7';
import Framework7, { getDevice } from 'framework7/bundle';

// Import F7 Styles
import 'framework7/css/bundle';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/style.css';
import '../css/app.css';

// Import Cordova APIs
import cordovaApp from './cordova-app.js';

import store from './store.js';
import routes from './routes.js';

// Import main app component
import App from '../app.f7';

var device = getDevice();
var f7AppInstance = new Framework7({
  name: 'AppName', // App name
  theme: 'ios', // Automatic theme detection

  el: '#app', // App root element
  component: App, // App main component

  // App store
  store: store,
  // App routes
  routes: routes,

  iosTranslucentBars: false,
  iosTranslucentModals: true,

  view: {
    browserHistory: true,
    browserHistorySeparator: '',

    browserHistoryAnimate: !Framework7.device.ios,
    // pushStateSeparator:'',
    // pushState: true,
    // preloadPreviousPage: false,
  },

  // Input settings
  input: {
    scrollIntoViewOnFocus: device.cordova,
    scrollIntoViewCentered: device.cordova,
  },
  // Cordova Statusbar settings
  statusbar: {
    iosOverlaysWebView: true,
    androidOverlaysWebView: false,
  },
  on: {
    init: function () {
      var f7 = this;
      if (f7.device.cordova) {
        // Init cordova APIs (see cordova-app.js)
        cordovaApp.init(f7);
      }
    },
  },
});
5

As you mentioned, you’re using Tabbed Views, but do note that browserHistory works only with Single View—specifically, the view-main.

Can you try restructuring your app to use a single view setup and test if browserHistory works as expected? That would help confirm whether the issue is due to the tabbed view structure or something else.

6

I am using styling from a template Yui (Yui - Mobile Template by Xioyuna | ThemeForest)

The template uses the tab views and still works with browserHistory enabled. Works well when i refresh too.

Could it be because I am on dev? I’m testing using npm run dev