Using QML Modules with Plugins

QML modules may use C++ plugins to expose components defined in C++ to Qt Quick applications.

To create a QML module and make it appear in the Components view:

  1. Create custom components and place all the .qml files in a directory dedicated to your module. For example, imports\asset_imports.
  2. Specify the path to the directory that has the module in the .qmlproject file of the application where you want to use the module as a value of the importPaths variable. For example, importPaths: [ "imports", "asset_imports" ].
  3. Create a qmldir file for your module and place it in the module directory. For more information, see Module Definition qmldir Files.
  4. Create a directory named designer in your module directory.
  5. Create a .metainfo file for your module and place it in the designer directory. Meta information is needed to display the components in Components. Use a metainfo file delivered with Qt, such as qtquickcontrols2.metainfo, as an example.
  6. Build your module using the same Qt version and compiler as Qt Design Studio.

    Your module and components should now appear in Components.

Note: If Qt Design Studio cannot find the new QML module, build the project and then go to Tools > QML/JS > Reset Code Model to reset the code model. For more information about how to show the Tools menu, see Customizing the Menu.

Running QML Modules in Design Mode

A QML emulation layer (also called QML Puppet) is used in the Design mode to render and preview images and to collect data. To be able to render custom components correctly from QML modules, the emulation layer must be built with the same Qt version and compiler as the QML modules.

Qt Design Studio runs projects using a specific version of Qt. In Qt Design Studio, find the Qt runtime version in the bottom toolbar.

A plugin should behave differently depending on whether it is run by the emulation layer or an application. For example, animations should not be run in the Design mode. You can use the value of the QML_PUPPET_MODE environment variable to check whether the plugin is currently being run by an application or edited in the Design mode.

See also Resetting the Code Model.

Available under certain Qt licenses.
Find out more.