Vue 3.0 / F7 6.0.7 / Webstorm HTML Tags

Good Afternoon,

I have set up a Vue 3.0 project. I added Framework7 and Framework7-vue.

I am using Webstorm & I seem to be having problems with registering components globally. The project gets built and can serve to localhost, but webstorm marks the f7 components as unknown (Unknown html tag f7-app).

This is obviously a Webstorm issue. I just wanted to know if anyone has had similar issues or any work arounds?

Thanks in advance

I guess only by registering all F7 Vue components manually in your main JS file:

import {
  f7AccordionContent,
  f7AccordionItem,
  f7AccordionToggle,
  f7Accordion,
  f7ActionsButton,
  f7ActionsGroup,
  f7ActionsLabel,
  f7Actions,
  f7App,
  f7Appbar,
  f7AreaChart,
  f7Badge,
  f7BlockFooter,
  f7BlockHeader,
  f7BlockTitle,
  f7Block,
  f7Button,
  f7CardContent,
  f7CardFooter,
  f7CardHeader,
  f7Card,
  f7Checkbox,
  f7Chip,
  f7Col,
  f7FabBackdrop,
  f7FabButton,
  f7FabButtons,
  f7Fab,
  f7Gauge,
  f7Icon,
  f7Input,
  f7Link,
  f7ListButton,
  f7ListGroup,
  f7ListIndex,
  f7ListInput,
  f7ListItemCell,
  f7ListItemRow,
  f7ListItem,
  f7List,
  f7LoginScreenTitle,
  f7LoginScreen,
  f7MenuDropdownItem,
  f7MenuDropdown,
  f7MenuItem,
  f7Menu,
  f7Message,
  f7MessagebarAttachment,
  f7MessagebarAttachments,
  f7MessagebarSheetImage,
  f7MessagebarSheetItem,
  f7MessagebarSheet,
  f7Messagebar,
  f7MessagesTitle,
  f7Messages,
  f7NavLeft,
  f7NavRight,
  f7NavTitleLarge,
  f7NavTitle,
  f7Navbar,
  f7PageContent,
  f7Page,
  f7Panel,
  f7PhotoBrowser,
  f7PieChart,
  f7Popover,
  f7Popup,
  f7Preloader,
  f7Progressbar,
  f7Radio,
  f7Range,
  f7RoutableModals,
  f7Row,
  f7Searchbar,
  f7Segmented,
  f7Sheet,
  f7SkeletonAvatar,
  f7SkeletonBlock,
  f7SkeletonImage,
  f7SkeletonText,
  f7Stepper,
  f7Subnavbar,
  f7SwipeoutActions,
  f7SwipeoutButton,
  f7SwiperSlide,
  f7Swiper,
  f7Tab,
  f7Tabs,
  f7TextEditor,
  f7Toggle,
  f7Toolbar,
  f7TreeviewItem,
  f7Treeview,
  f7View,
  f7Views,
} from "framework7-vue";

app.component("f7-accordion-content", f7AccordionContent);
app.component("f7-accordion-item", f7AccordionItem);
app.component("f7-accordion-toggle", f7AccordionToggle);
app.component("f7-accordion", f7Accordion);
app.component("f7-actions-button", f7ActionsButton);
app.component("f7-actions-group", f7ActionsGroup);
app.component("f7-actions-label", f7ActionsLabel);
app.component("f7-actions", f7Actions);
app.component("f7-app", f7App);
app.component("f7-appbar", f7Appbar);
app.component("f7-area-chart", f7AreaChart);
app.component("f7-badge", f7Badge);
app.component("f7-block-footer", f7BlockFooter);
app.component("f7-block-header", f7BlockHeader);
app.component("f7-block-title", f7BlockTitle);
app.component("f7-block", f7Block);
app.component("f7-button", f7Button);
app.component("f7-card-content", f7CardContent);
app.component("f7-card-footer", f7CardFooter);
app.component("f7-card-header", f7CardHeader);
app.component("f7-card", f7Card);
app.component("f7-checkbox", f7Checkbox);
app.component("f7-chip", f7Chip);
app.component("f7-col", f7Col);
app.component("f7-fab-backdrop", f7FabBackdrop);
app.component("f7-fab-button", f7FabButton);
app.component("f7-fab-buttons", f7FabButtons);
app.component("f7-fab", f7Fab);
app.component("f7-gauge", f7Gauge);
app.component("f7-icon", f7Icon);
app.component("f7-input", f7Input);
app.component("f7-link", f7Link);
app.component("f7-list-button", f7ListButton);
app.component("f7-list-group", f7ListGroup);
app.component("f7-list-index", f7ListIndex);
app.component("f7-list-input", f7ListInput);
app.component("f7-list-item-cell", f7ListItemCell);
app.component("f7-list-item-row", f7ListItemRow);
app.component("f7-list-item", f7ListItem);
app.component("f7-list", f7List);
app.component("f7-login-screen-title", f7LoginScreenTitle);
app.component("f7-login-screen", f7LoginScreen);
app.component("f7-menu-dropdown-item", f7MenuDropdownItem);
app.component("f7-menu-dropdown", f7MenuDropdown);
app.component("f7-menu-item", f7MenuItem);
app.component("f7-menu", f7Menu);
app.component("f7-message", f7Message);
app.component("f7-messagebar-attachment", f7MessagebarAttachment);
app.component("f7-messagebar-attachments", f7MessagebarAttachments);
app.component("f7-messagebar-sheet-image", f7MessagebarSheetImage);
app.component("f7-messagebar-sheet-item", f7MessagebarSheetItem);
app.component("f7-messagebar-sheet", f7MessagebarSheet);
app.component("f7-messagebar", f7Messagebar);
app.component("f7-messages-title", f7MessagesTitle);
app.component("f7-messages", f7Messages);
app.component("f7-nav-left", f7NavLeft);
app.component("f7-nav-right", f7NavRight);
app.component("f7-nav-title-large", f7NavTitleLarge);
app.component("f7-nav-title", f7NavTitle);
app.component("f7-navbar", f7Navbar);
app.component("f7-page-content", f7PageContent);
app.component("f7-page", f7Page);
app.component("f7-panel", f7Panel);
app.component("f7-photo-browser", f7PhotoBrowser);
app.component("f7-pie-chart", f7PieChart);
app.component("f7-popover", f7Popover);
app.component("f7-popup", f7Popup);
app.component("f7-preloader", f7Preloader);
app.component("f7-progressbar", f7Progressbar);
app.component("f7-radio", f7Radio);
app.component("f7-range", f7Range);
app.component("f7-routable-modals", f7RoutableModals);
app.component("f7-row", f7Row);
app.component("f7-searchbar", f7Searchbar);
app.component("f7-segmented", f7Segmented);
app.component("f7-sheet", f7Sheet);
app.component("f7-skeleton-avatar", f7SkeletonAvatar);
app.component("f7-skeleton-block", f7SkeletonBlock);
app.component("f7-skeleton-image", f7SkeletonImage);
app.component("f7-skeleton-text", f7SkeletonText);
app.component("f7-stepper", f7Stepper);
app.component("f7-subnavbar", f7Subnavbar);
app.component("f7-swipeout-actions", f7SwipeoutActions);
app.component("f7-swipeout-button", f7SwipeoutButton);
app.component("f7-swiper-slide", f7SwiperSlide);
app.component("f7-swiper", f7Swiper);
app.component("f7-tab", f7Tab);
app.component("f7-tabs", f7Tabs);
app.component("f7-text-editor", f7TextEditor);
app.component("f7-toggle", f7Toggle);
app.component("f7-toolbar", f7Toolbar);
app.component("f7-treeview-item", f7TreeviewItem);
app.component("f7-treeview", f7Treeview);
app.component("f7-view", f7View);
app.component("f7-views", f7Views);

Thanks for your reply. I thought this was going to work.
I forgot to mention that I am using typescript which means my main file is a main.ts
When i add the above import i get the below error “TS2724: Module '”…/node_modules/framework7-vue/framework7-vue"’ has no exported member ‘f7AccordionItem’."

Also worth noting when I install Framework7 v6.0.0 / Framework7-vue v6.0.0 webstorm does recognise the f7 components.

There is no TS declaration for F7-Vue components, so you have to use @ts-ignore around those imports

Did you manage to solve the problem with WebStorm?
I’m facing the problem with all new versions > 6.0.0, and Vlad’s answer doesn’t work.

[No autocomplete, tags unknown]

Unfortunately not a nice fix. I added the tags as custom tags into webstorm for the current project.