Developing a complete app with a navigation bar and database Unable to resolve path to module error

💻 Development
1

Summary of the issue :

While following the Nextcloud Developing a complete app with a navigation bar and database_Vue2 tutorial, some of the code uses older @nextcloud/vue import paths and Vue 2 syntax.

The project is using:

"@nextcloud/vue": "^9.8.2"

With this dependency version, the older component import paths such as:

@nextcloud/vue/dist/Components/...

result in module not found / import resolution errors.

There is also an escaped quote in App.vue and the main.ts file uses Vue 2 application initialization syntax, which needs to be updated for Vue 3.

Steps to replicate it:

1. Update imports in src/views/App.vue

In src/views/App.vue, lines 25–27 contain:

import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'

These imports result in a module not found error with the current @nextcloud/vue dependency:

"@nextcloud/vue": "^9.8.2"

Solution

Replace all three imports with a single import:

import { NcContent, NcAppContent, NcEmptyContent } from '@nextcloud/vue'

2. Fix the escaped quote in src/views/App.vue

In src/views/App.vue, the NcEmptyContent component contains:

:title=\"t('notebook', 'Select a note')\">

The \ before the quote should not be there.

Solution

Change it to:

:title="t('notebook', 'Select a note')">

3. Update the import in src/components/MyMainContent.vue

In src/components/MyMainContent.vue, line 18 contains:

import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'

With the current @nextcloud/vue version, this old import path is not available.

Solution

Replace it with:

import { NcRichContenteditable } from '@nextcloud/vue'

4. Update imports in src/components/MyNavigation.vue

In src/components/MyNavigation.vue, lines 58–62 contain:

import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigationNewItem.js'

These use the older component paths.

Solution

Replace all five imports with:

import {
	NcAppNavigation,
	NcEmptyContent,
	NcAppNavigationItem,
	NcActionButton,
	NcAppNavigationNewItem,
} from '@nextcloud/vue'

5. Update Vue initialization in main.ts

The tutorial code uses Vue 2 syntax:

import App from './views/App.vue'
import Vue from 'vue'

Vue.mixin({ methods: { t, n } })

const VueApp = Vue.extend(App)
new VueApp().$mount('#content')

This does not work with Vue 3 because Vue 3 does not export the Vue constructor in this way.

Solution

Use Vue 3’s createApp() API:

import { createApp } from 'vue'
import App from './views/App.vue'

const app = createApp(App)

app.mixin({
	methods: {
		t,
		n,
	},
})

app.mount('#content')

This creates the Vue application, registers the global mixin.

Quick Summary of Changes

File Problem Solution
src/views/App.vue Old @nextcloud/vue/dist/Components/... imports Import components directly from @nextcloud/vue
src/views/App.vue \" in Vue attribute Change to normal "
src/components/MyMainContent.vue Old NcRichContenteditable import Import from @nextcloud/vue
src/components/MyNavigation.vue Old component import paths Import all components from @nextcloud/vue
src/main.ts Vue 2 initialization Use Vue 3 createApp()

The main reason for these changes is that the tutorial code is using older Vue / @nextcloud/vue patterns, while the project is using the newer dependency:

"@nextcloud/vue": "^9.8.2"
"vue": "^3.5.35",

So the component imports and Vue application initialization need to match the newer API.

2

You seem to be referencing the Vue 2 version of the tutorial which is intended for apps that have Vue 2 installed as a dependency. Plus, the Vue 2 tutorial itself is deprecated anyway and so we won’t be making further changes to it. Please follow the Vue 3 tutorial instead and let us know if there are any mistakes there.

3

However, I don’t believe the Vue 3 version of the tutorial has been added yet in the documentation I am following.

4

The Tutorial_Developing a complete app with a navigation bar and database.md file is the Vue 3 version.

5

ooh, nice.
Thanks