In Vue.js applications, export and import statements are part of ES6 (ECMAScript 2015) module syntax that enable developers to share code between files. These mechanisms help organize large-scale projects, enhance code reusability, and improve maintainability.

Export Mechanisms

The export keyword allows modules to be made availible for use in other parts of an application. In Vue projects, this commonly involves exporting components, but can also apply to functions, variables, and objects.

Exporting Vue Components

Vue components are typicallly defined in .vue files containing template, script, and style sections. To utilize these components elsewhere, they must be exported.

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      greeting: 'Welcome to Vue!'
    }
  }
}
</script>

<style>
/* Component styles */
</style>

This example shows how export default is used to make a Vue component available for import in other files. It includes component configuration like name and data properties.

Exporting JavaScript Objects

Regular JavaScript files can export functions, constants, or objects using named or default exports.

// helpers.js
export function greetUser(username) {
  return `Greetings, ${username}!`;
}
export const EULER_NUMBER = 2.71828;
export default {
  computeVolume(radius) {
    return (4/3) * Math.PI * Math.pow(radius, 3);
  }
}

This snippet demontsrates exporting a function, a constant, and a default object with a method for volume calculation.

Import Usage

The import statement retrieves modules that have been exported from other files. This includes Vue components, utility functions, or plain JavaScript objects.

Using Vue Components

To incorporate another Vue component into a current one, it must first be imported and registered within the component's options.

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

Here, the MyComponent is imported and registered under its own name in the components option, making it accessible within the template.

Importing JavaScript Modules

Functions and values can be imported from regular JS files using destructuring syntax.

// helpers.js
export function greetUser(username) {
  return `Greetings, ${username}!`;
}
export const EULER_NUMBER = 2.71828;
// Another file imports them
import { greetUser, EULER_NUMBER } from './helpers.js';

console.log(greetUser('Vue')); // Outputs: Greetings, Vue!
console.log(EULER_NUMBER); // Outputs: 2.71828

Default Imports

When a module uses export default, it can be imported with any identifier.

// calculator.js
export default {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
}
// In another file
import calc from './calculator.js';
console.log(calc.add(10, 5)); // Outputs: 15

This illustrates importing a default-exported object and using it with a custom alias.