Skip to content

Vue.js Single-File JavaScript Components

Vue.js Single-File JavaScript Components refer to a development pattern where Vue components are defined in standalone JavaScript files and directly imported in the browser using ES6 Modules, bypassing the need for a build step or [[Babel]].^[600-developer__frontend__vue__vue-module.md]

Implementation

To implement this pattern, the HTML <script> tags must utilize type="module" to enable native browser module support.^[600-developer__frontend__vue__vue-module.md] The Vue instance is initialized in a main entry file (e.g., app.js), which imports the component logic.^[600-developer__frontend__vue__vue-module.md]

The component itself is defined in a separate file (e.g., SingleFileComponent.js) using the standard ES6 export default syntax.^[600-developer__frontend__vue__vue-module.md] Unlike traditional Single-File Components (.vue files), this approach uses the template property within the JavaScript object to define the HTML structure.^[600-developer__frontend__vue__vue-module.md]

Code Structure

  • index.html: Includes the Vue library and references the module scripts.
  • app.js: Imports the component and initializes the root Vue instance.
  • SingleFileComponent.js: Exports the component object, including the template, data properties, and methods.^[600-developer__frontend__vue__vue-module.md]
  • [[ES6 Modules]]
  • [[JavaScript]]

Sources

  • 600-developer__frontend__vue__vue-module.md