{"id":12850,"library":"aurelia-framework","title":"Aurelia Framework","description":"Aurelia is a modern, client-side JavaScript framework designed for building browser, mobile, and desktop applications. It emphasizes web platform alignment, convention over configuration, and minimal framework intrusion, allowing developers to write more standard JavaScript/TypeScript code. The current stable version is 1.4.1, primarily receiving maintenance updates to address dependency vulnerabilities as seen in recent releases. Key differentiators include its powerful reactive binding engine, robust templating, and a focus on composing simple, standard components, typically a vanilla JavaScript/TypeScript class paired with an HTML template. It integrates core Aurelia libraries into a unified platform for application development.","status":"maintenance","version":"1.4.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/aurelia/framework","tags":["javascript","aurelia","framework","spa","typescript"],"install":[{"cmd":"npm install aurelia-framework","lang":"bash","label":"npm"},{"cmd":"yarn add aurelia-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add aurelia-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for UI composition and binding, as highlighted by recent vulnerability fixes.","package":"aurelia-templating","optional":false}],"imports":[{"note":"Aurelia 1.x is primarily designed for ES Modules with transpilation or direct browser import. CommonJS `require` is generally not idiomatic or supported for core framework classes.","wrong":"const Aurelia = require('aurelia-framework');","symbol":"Aurelia","correct":"import { Aurelia } from 'aurelia-framework';"},{"note":"FrameworkConfiguration is a named export, essential for configuring plugins and features within the Aurelia application lifecycle.","wrong":"import FrameworkConfiguration from 'aurelia-framework';","symbol":"FrameworkConfiguration","correct":"import { FrameworkConfiguration } from 'aurelia-framework';"},{"note":"When configuring plugins or resources, always wrap module paths with `PLATFORM.moduleName()` for correct module resolution, especially in environments that don't auto-resolve based on convention.","wrong":"aurelia.use.plugin(PLATFORM.moduleName('./my-plugin'));","symbol":"configure","correct":"import * as environment from './environment';\naurelia.use.globalResources([PLATFORM.moduleName('path/to/component')]);"}],"quickstart":{"code":"import { Aurelia } from 'aurelia-framework';\nimport { PLATFORM } from 'aurelia-pal';\n\n// app.js\nexport class App {\n  welcome = \"Welcome to Aurelia\";\n\n  quests = [\n    \"To seek the holy grail\",\n    \"To take the ring to Mordor\",\n    \"To rescue princess Leia\"\n  ];\n\n  name = '';\n  quest = '';\n}\n\n// main.ts (or main.js)\nexport function configure(aurelia: Aurelia) {\n  aurelia.use\n    .standardConfiguration()\n    // Optionally install a plugin, e.g., for routing or validation\n    // .feature(PLATFORM.moduleName('aurelia-router'))\n    .developmentLogging();\n\n  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));\n}\n\n/*\n<!-- app.html -->\n<template>\n  <form>\n    <label for=\"name-field\">What is your name?</label>\n    <input id=\"name-field\" value.bind=\"name & debounce:500\">\n\n    <label for=\"quest-field\">What is your quest?</label>\n    <select id=\"quest-field\" value.bind=\"quest\">\n      <option></option>\n      <option repeat.for=\"q of quests\">${q}</option>\n    </select>\n  </form>\n\n  <p if.bind=\"name\">${welcome}, ${name}!</p>\n  <p if.bind=\"quest\">Now set forth ${quest.toLowerCase()}!</p>\n</template>\n*/","lang":"typescript","description":"This quickstart demonstrates a basic Aurelia application with a root component (`App`) and its corresponding HTML template, showcasing two-way data binding and list rendering."},"warnings":[{"fix":"Review `aurelia.setRoot()` calls and plugin configurations. Consider passing actual class references or ensuring string module IDs are correctly resolved via `PLATFORM.moduleName()`.","message":"Aurelia 1.3.0-rc.1 introduced changes allowing the root component to be defined with a constructor and the `config` method to accept classes in addition to module ID strings for better type safety and flexibility. Existing configurations relying solely on string IDs for root components or configuration objects might need slight adjustments if migrating from older versions.","severity":"breaking","affected_versions":">=1.3.0-rc.1"},{"fix":"Ensure your bundler (e.g., Webpack, Rollup) is configured to correctly handle the `module` field in `package.json` for optimal ESM consumption. If using older CommonJS environments, verify module resolution.","message":"Starting with Aurelia 1.3.1, the `package.json` includes a `module` field. While generally beneficial for bundlers to use ESM builds, older build setups or specific CommonJS environments might encounter unexpected module resolution if not configured to respect this field, potentially causing issues with tree-shaking or module loading.","severity":"breaking","affected_versions":">=1.3.1"},{"fix":"Always update to the latest patch version (e.g., `npm install aurelia-framework@latest`) to ensure all known dependency vulnerabilities are patched. Regularly audit your dependencies.","message":"Recent versions 1.4.0 and 1.4.1 addressed vulnerabilities in underlying dependencies (e.g., `aurelia-templating`). While these are patch releases, failing to update can leave your application exposed to known security issues, particularly those related to chained dependencies.","severity":"gotcha","affected_versions":">=1.0.0 <1.4.1"},{"fix":"Always import `PLATFORM` from `aurelia-pal` and use `PLATFORM.moduleName('module-id')` for all module string references in `aurelia.use` configuration or `setRoot` calls. Ensure `aurelia-pal` is correctly resolved by your bundler.","message":"Aurelia heavily relies on `aurelia-pal` (Platform Abstraction Layer) for environment-specific functionality. Incorrectly configuring or importing `PLATFORM` (e.g., `PLATFORM.moduleName`) can lead to module resolution failures or runtime errors, especially when deploying to different environments (browser, Node, Electron).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that your `aurelia.setRoot()` call uses `PLATFORM.moduleName('app')` and that `app.js`/`app.ts` is located in a path discoverable by your build system and Aurelia's loader. Check `aurelia.json` or your Webpack/Rollup config.","cause":"The root component's module name is not correctly resolved by Aurelia's loader.","error":"Error: Cannot find module 'app'"},{"fix":"Ensure `new Aurelia().use.standardConfiguration()` is called before attempting to register any custom plugins or features. Verify the `aurelia` instance is correctly passed to your `configure` function.","cause":"Attempting to use `aurelia.use.plugin()` or `aurelia.use.feature()` without a properly initialized Aurelia instance or before the `aurelia.use.standardConfiguration()`.","error":"TypeError: Cannot read properties of undefined (reading 'registerPlugin')"},{"fix":"Verify that `aurelia-templating` is listed in your `package.json` dependencies and installed. Ensure `aurelia.use.standardConfiguration()` is called, as it sets up essential core plugins including templating.","cause":"A core templating dependency or `aurelia-templating` itself is missing or not properly configured within the Aurelia application.","error":"Error: You must configure 'aurelia-templating' (or a dependency of it) to use 'view-engine'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null}