acf domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/evomark/public_html/wp-includes/functions.php on line 6121Having a separate component for every task in Vue makes it amazingly simple to keep logic grouped together in a way that makes code-maintenance a breeze.<\/p>\n\n\n\n
Less fun, though, is having to write a dozen lines of imports inside every Single File Component in Vue. Even worse if you want those imports to be loaded asynchronously.<\/p>\n\n\n\n
If you’re using Nuxt, you’ll have automatic component registration\/loading out-of-the-box. For everyone else, there’s Unplugin Auto Components<\/a>. There’s just one problem here, every one of your components is registered as a synchronous component. This is fine for smaller apps, but for the bigger projects, that means every one of your components has to be loaded before anything can show.<\/p>\n\n\n\n We decided to let users split their components into loading strategy by folder: sync, async and web.<\/p>\n\n\n\n Sync components are loaded immediately and best for high-use components or ones that are need for common landing pages.<\/p>\n\n\n\n Async components are registered with Finally, web components are a special case which registers the SFC as a native web-component. These files must use This plugin should be used before your app is mounted.<\/p>\n\n\n\n Pay special attention to the In the code above, we pass \u201cEvo\u201d as a namespace. This means that every component registered is prefixed with it. For sync\/async components, that will be No distinction is made between async and sync components when generating a name (we wanted to make it easy to move them from one folder to the other without changing the component name) so don\u2019t have the same component in the same folder path in both async and sync globs.<\/p>\n\n\n\n The final name of your component comprises three parts: the namespace, the path, and your component\u2019s name.<\/p>\n\n\n\n Using the above, a component inside Or if you had Note that any hyphens, underscores or spaces in your folder names are automatically converted to PascalCase.<\/p>\n\n\n\n You can pass a separate Using the SocialLinks component example above, the plugin would check if Our Different Approach<\/h2>\n\n\n\n
defineAsyncComponent<\/code> and therefore do not download until they are detected in your markup. You can also specify a custom loader component which can be useful for long-hydration elements.<\/p>\n\n\n\n.ce.vue<\/code> extensions.<\/p>\n\n\n\nInstallation<\/h2>\n\n\n\n
Usage<\/h2>\n\n\n\n
eager<\/code> prop that is passed to the Vite glob loader.<\/p>\n\n\n\nNamespace<\/h2>\n\n\n\n
EvoComponent<\/code> and for web components, that will equal evo-component<\/code>.<\/p>\n\n\n\nName Resolution (Sync\/Async)<\/h2>\n\n\n\n
.\/components\/sync\/layout\/header\/Menu.vue<\/code> would be registered with the component name EvoLayoutHeaderMenu<\/code>.<\/p>\n\n\n\n.\/components\/async\/nav-items\/footer\/SocialLinks.vue<\/code>, then your registered component name would be EvoNavItemsFooterSocialLinks<\/code>.<\/p>\n\n\n\nAsync Loading Components<\/h2>\n\n\n\n
asyncLoading<\/code> glob to the plugin options. When resolving an async component, the same location is checked for a Loading<\/code> component which is used while waiting for your async component to load. A common use of these is to show skeleton loaders while more complex components are initiated. See the Vue documentation<\/a> for more details.<\/p>\n\n\n\n.\/components\/async\/nav-items\/footer\/SocialLinksLoading.vue<\/code> existed, and if so, this would be used as a loading component.<\/p>\n\n\n\nName Resolution (Web Components)<\/h2>\n\n\n\n