C++ class as qml module in Qt Design Studio

Zug123

Dear Qt community,

I am doing my first steps with Qt on an iMX8M Mini. I setup a demo for VS Code.
To edit the qml and ui.qml files I am using the Qt Design Studio.

To interact with some business logic I setup a counter.cpp class.
I am able to compile and run the following code on the iMX8M Mini:

// File Counter.h
#ifndef COUNTER_H
#define COUNTER_H


/* === INCLUDE FILES =============================================================== */
#include <QObject>
#include <qqml.h>


/* === CLASS ======================================================================= */
class Counter : public QObject
{
Q_OBJECT
QML_ELEMENT
public:
    explicit Counter(QObject *parent = 0);
    Q_INVOKABLE void IncrementCounter();

signals:

public slots:

private:
    int m_counter;
};

#endif

// File Counter.cpp
#include "Counter.h"
#include <QDebug>
 
Counter::Counter(QObject *parent) :
QObject(parent), m_counter(0)
{
}

void Counter::IncrementCounter() {
   m_counter++;
   qDebug() << "value: " << QString().number(m_counter);
}

// File HelloWorldQtQml.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QDebug>
#include "Counter.h"
 
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    // Register Counter with version 1.0
    qmlRegisterType<Counter>("Counter", 1, 0, "Counter");
 
    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/mainwindow.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
 
    return app.exec();
}

# File HelloWorldQtQml.pro
TEMPLATE = app

TARGET = HelloWorldQtQml

HEADERS = HelloWorldQtQml.h \
        Source/Counter.h

SOURCES = HelloWorldQtQml.cpp \
        Source/Counter.cpp

# $$PWD refers to folder that contains the .pro file
INCLUDEPATH += $$PWD/Source

DESTDIR = $$(QMAKE_DESTIDIR)

QT+= core quick qml

RESOURCES += qml.qrc

# Specifies the directory where all intermediate objects should be placed
OBJECTS_DIR = ./build
MOC_DIR = ./build
UI_DIR = ./build

So far so good.

Now my Qt Design Studio does not recognise this Counter module:

I assume that I have to register this module.

If I try to continue my .pro file as described here:
https://doc.qt.io/qt-5/qtqml-cppintegration-definetypes.html

# File HelloWorldQtQml.pro
TEMPLATE = app

TARGET = HelloWorldQtQml


CONFIG += qmltypes
QML_IMPORT_NAME = counter
QML_IMPORT_MAJOR_VERSION = 1


HEADERS = HelloWorldQtQml.h \
        Source/Counter.h

SOURCES = HelloWorldQtQml.cpp \
        Source/Counter.cpp

# $$PWD refers to folder that contains the .pro file
INCLUDEPATH += $$PWD/Source

DESTDIR = $$(QMAKE_DESTIDIR)

QT+= core quick qml

RESOURCES += qml.qrc

# Specifies the directory where all intermediate objects should be placed
OBJECTS_DIR = ./build
MOC_DIR = ./build
UI_DIR = ./build

it ends in the following error:

/usr/lib/qt5/bin/moc --collect-json -o helloworldqtqml_metatypes.json build/moc_Counter.cpp.json
Error opening build/moc_Counter.cpp.json for reading
make: *** [Makefile:432: helloworldqtqml_metatypes.json] Error 1
The terminal process "/bin/bash '-c', 'make'" failed to launch (exit code: 2).

What is missing to import and use this counter.cpp module in my qml file?
There is no moc_Counter.cpp.json file yet.
How do I "link" the counter.cpp module with QML_IMPORT_NAME in the .pro file?

My VS code folder looks like this:

.
├── appconfig_0
│   ├── config.yaml
│   ├── id_rsa
│   ├── id_rsa.pub
│   ├── sdkfiles
│   │   ├── core.py
│   │   ├── __init__.py
│   │   └── typeinfo.py
│   └── work
│       ├── debug.tar
│       ├── docker-compose.yml.debug
│       ├── Dockerfile.debug
│       ├── Dockerfile_SDK.debug
│       └── HelloWorldQtQml
│           └── HelloWorldQtQml
├── build
│   ├── Counter.o
│   ├── HelloWorldQtQml.o
│   ├── moc_Counter.cpp
│   ├── moc_Counter.o
│   ├── moc_predefs.h
│   └── qrc_qml.o
├── HelloWorldQtQml.cpp
├── HelloWorldQtQml.h
├── helloworldqtqml_metatypes.json
├── HelloWorldQtQml.pro
├── mainwindow.qml
├── Makefile
├── qml.qrc
├── qrc_qml.cpp
└── Source
    ├── Counter.cpp
    └── Counter.h

I am using:

QMake version: 3.1
Using Qt version: 5.9.5 in /usr/lib/x86_64-linux-gnu
Visual Studio Code: 1.68.1
Qt Design Studio 1.6.1
iMX8M Mini Dual Light

Thank you in advance and best regards,
Zag