How to use Nextcloud Vue navigation components?

[ryanb]

I’m struggling to get the navigation portion of a Vue app working. I’m trying to follow this and this but I can’t seem to understand how to use the components or get them to show up in the right place. My original non-Vue version looked like this.

but my attempt at using Vue has the settings and the navigation items showing up in the middle like this.

I just want nav buttons at the top that load reports in the content area when they’re clicked. And I want the settings at the bottom like they are in other NC apps. Here is my code. Any suggestions?

<template>
	<Content :class="{'icon-loading': loading}" app-name="hledger">
		<AppNavigation>
			<ul>
				<AppNavigationItem title="Item with actions" icon="icon-category-enabled" :pinned="true">
					<template slot="actions">
						<ActionButton icon="icon-edit" @click="alert('Edit')">
							Edit
						</ActionButton>
						<ActionButton icon="icon-delete" @click="alert('Delete')">
							Delete
						</ActionButton>
						<ActionLink icon="icon-external" title="Link" href="https://nextcloud.com" />
					</template>
				</AppNavigationItem>
			</ul>
			<AppNavigationSettings>
				Example settings
			</AppNavigationSettings>
		</AppNavigation>
		<AppContent>
			Hello World!
		</AppContent>
	</Content>
</template>
<script>
import Content from '@nextcloud/vue/dist/Components/Content'
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
import '@nextcloud/dialogs/styles/toast.scss'
export default {
	name: 'App',
	components: {
		Content,
		AppNavigation,
		AppNavigationItem,
		AppNavigationSettings,
		AppContent,
	},
	data() {
		return {
			loading: false,
			message: 'Initial Message',
			report: [
				['A', 'B', 'C'],
				[1, 2, 3],
				[4, 5, 6],
			],
		}
	},
	computed: {},
	methods: {},
}
</script>

[StCyr]

you should probably add ‘id=content’ to your component (Depends on your template/index.php file or whatever the file you’ve specified in your PageController->index() function). This tells your vue component where to inject itself.

Could you also share your PageController->index() function?

[skjnldsv]

Hey! Please check the docs, I think the app-tutorial and vueexample needs a bump
https://nextcloud-vue-components.netlify.app/#/Components/App%20containers?id=content

	<AppNavigation>
		<template #list>
			<AppNavigationNew text="Create article" />
			<AppNavigationItem title="My title" icon="icon-category-enabled" />
		</template>
	</AppNavigation>

Enjoy!

[ryanb]

Got it. Thanks! That gets it working for navigation items. But the settings are still not in the right place.

Here is the current code.

<template>
	<Content :class="{'icon-loading': loading}" app-name="hledger">
		<AppNavigation>
			<template #list>
				<AppNavigationItem title="Budget" icon="icon-toggle-filelist" />
				<AppNavigationItem title="Income Statement" icon="icon-clippy" />
				<AppNavigationItem title="Balance Sheet" icon="icon-edit" />
			</template>
			<AppNavigationSettings>
				Example Settings
			</AppNavigationSettings>
		</AppNavigation>
		<AppContent>
			Hello World!
		</AppContent>
	</Content>
</template>

How do I make settings appear at the bottom like in other NC apps? I don’t see anything I’m doing wrong in the docs.

[ryanb]

I figured it out by looking at the deck app. AppNavigationSettings needs to go inside a <template #footer>.

<template>
	<Content :class="{'icon-loading': loading}" app-name="hledger">
		<AppNavigation>
			<template #list>
				<AppNavigationItem title="Budget" icon="icon-toggle-filelist" />
				<AppNavigationItem title="Income Statement" icon="icon-clippy" />
				<AppNavigationItem title="Balance Sheet" icon="icon-edit" />
			</template>
			<template #footer>
				<AppNavigationSettings>
					Example Settings
				</AppNavigationSettings>
			</template>
		</AppNavigation>
		<AppContent>
			Hello World!
		</AppContent>
	</Content>
</template>
<script>

It works!