Meteor/Vue/Framework7: No style being used

Question

I am using Framework7 with meteor and vue and I have included framework7 like this in my main.js:

import { Meteor } from 'meteor/meteor';
import { createApp } from 'vue';
import { VueMeteor } from 'vue-meteor-tracker';
import App from './App.vue';
import { router } from './router';
import Framework7 from 'framework7/lite-bundle';
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
Framework7.use(Framework7Vue);
const app = createApp(App);
registerComponents(app);

Meteor.startup(() => {
  app.use(router);
  app.use(VueMeteor);
  app.mount('#app');
});

Unfortunately, the web page being rendered has no kind of framework7 control styling. I even included the css in the main.html file like this:

<link rel="stylesheet" href="./.node_modules/Framework7/framework-bundle.css">

EDIT 1: Step-by-step description of failure

Meteor project running with vue
install framework7 with npm i framework7
install framework7-vue with npm i framework7-vue
added import 'framework7/framework7-bundle.css (checked for its existance in node_modules folder) to main.js ==> Error is thrown: [vite] Internal server error: Missing "./framework7-bundle.css" export in "framework7" package

What am I doing wrong?

Thanks

Laurent Schoelens · Accepted Answer · 2023-11-28 16:36:19Z

0

You have to include the style from a style tag in your main Vue file.

For example, you have your main Vue file named App.vue in the root folder :

You can define the following tag in it :

<style lang="css">
@import 'framework7/css/bundle';
</style>

This will load the framework7 bundle css into your own app.css file and inject it as style stylesheet.

What I usually do (working in scss) is creating a main.scss file which will contain global style of my vue app in a css folder, and declare in my App.vue the following :

<style lang="scss">
@import 'css/main';
</style>

And in the css/main.scss file :

@import 'mynodemodule/path_to_my_css.css';

EDIT

That kind of syntax should also work (in main.js) (depending of which version of framework7 is used and file location inside framework7 node_module) according to package.json exports section of framework7 to get the bundle.css file :

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

EDIT 2

Another solution based on vue.js documentation that should fix your syntax is to declare the css src like this

<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css" />

That would give the following :

<!-- import a file from the installed "framework7" npm package -->
<style src="framework7/css/bundle" />

But this syntax doesn't work for me.

edited Nov 28, 2023 at 16:36

answered Nov 27, 2023 at 6:44

Laurent Schoelens

2,9732 gold badges8 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

AntonSack Over a year ago

Hi @Laurent Schoelens, thanks for your answer. I am wondering becausew in this documentation the css file is explicitly put into the main.html file. Also, I have problems in adding the css into the app.vue file. The place should be below the "template" part but when I add it there, the app does not start anymore. localhost:5173/imports/ui/… throws a 500 error.

Laurent Schoelens Over a year ago

What kind of error do you get in your app (npm / node or something serving your app in local dev mode) ? This is the kind of template I use : vuejs.org/api/sfc-spec.html#sfc-syntax-specification

Laurent Schoelens Over a year ago

I'll also add another solution based on vuejs documentation that should make your initial syntax work

AntonSack Over a year ago

Is there a boilerplate project availalbe somehow that shows a simple app with the combination of meteor/vue and framework7?

Laurent Schoelens Over a year ago

Found twice the same syntax in app.js : import 'framework7/css/framework7.bundle.css'; (updated answer, I think path depends of css path in the framework7 node_module)

|

Collectives™ on Stack Overflow

Meteor/Vue/Framework7: No style being used

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related