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.
With the release of v6.3.8 problem should be resolved, for instruction follow this link - Framework7 v6.3.8