Skip to main content

Importing Components

Alapa provides a flexible import system that supports multiple styles to include and use components within your templates. This allows you to structure your project efficiently and reuse components seamlessly.

Import Examples​

Here are various ways to import components in Alapa:

untitled
{%
import { Button, Input } from 'modules/form';
import Default { OtherComponent } from 'component/path';

// Aliases are also supported
import { Button as MyButton } from 'form';

// These will import the default component
import DefaultMember from 'components/default-member.component';
import 'component/button';
import("component/button")

// Import the default component as an alias
import DefaultMember as MyDefaultComponent from 'components/default-member.component';
%}

Import Syntax Breakdown​

1. Named Imports​

Use named imports to select specific components from a module.

Example:​

untitled
{%
import { Button, Input } from 'modules/form';
%}

2. Default Imports​

Import the default export of a module for use in your templates.

Example:​

untitled
{%
import DefaultMember from 'components/default-member.component';
%}

3. Aliased Imports​

Assign an alias to an imported component to avoid naming conflicts or for clarity.

Example:​

untitled
{%
import { Button as MyButton } from 'form';
import DefaultMember as MyDefaultComponent from 'components/default-member.component';
%}

4. Wildcard Imports​

Import all exports from a module when you need access to multiple components.

Example:​

untitled
{%
import * from 'modules/all-components';
%}

5. Dynamic Imports​

Load components dynamically when needed, which can be useful for optimizing performance.

Example:​

untitled
{%
import('component/button');
%}

Import Best Practices​

  • Organize Imports: Group related components together to maintain readability.
  • Use Aliases Sparingly: Aliases can improve clarity but may also lead to confusion if overused.
  • Leverage Dynamic Imports: Use dynamic imports for components that are not immediately needed to improve application performance.
  • Avoid Redundant Imports: Ensure components are imported only where they are required to keep templates clean.

With these import options, you can manage your components effectively and keep your templates modular and organized.