nuxt-ui-pro / landing

A landing page template made with Vue & Nuxt UI Pro.

Nuxt UI Pro - Landing template

This starter lets you get started with Nuxt UI Pro quickly.

• Live demo
• Play on Stackblitz
• Documentation

nuxt-ui-pro-landing-template.mp4

Setup

Make sure to install the dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

Check out the deployment documentation for more information.

Renovate integration

Install Renovate GitHub app on your repository and you are good to go.

landing's Issues

[Header] button labels are different between PC and mobile layouts

In PC layout, the button label in right slot is "Log in".
In mobile layout, the button label in panel slot is "Sign in".
I believe the button labels should be same, if they correspond to each other.

landing/components/Header.vue

Lines 43 to 54 in a524ca0

	<template #right>
	<UButton label="Log in" color="white" variant="ghost" trailing-icon="i-heroicons-arrow-right-20-solid" class="hidden lg:flex" />
	</template>
	<template #panel>
	<UAsideLinks :links="links" />
	<UDivider class="my-6" />
	<UButton label="Sign in" color="white" block class="mb-3" />
	<UButton label="Get started" block />
	</template>

By the way, in SaaS template, labels of similar button are "Log in/Sign up".
I'm not sure, but "Sign in/Sign out/Sign up" might be more natural or at least consistent (e.g. GitHub uses these phrases).
I don't know what is the last counterpart of "Log in/Log out/???", though.

Please close this issue if it's intended or trivial (?), because users can change the wording as they like.
I just wanted to let the team know the situation in case it's not recognized.

---

By the way, thank you for providing Nuxt UI and its Pro version!
I can reduce development time just because you have spent a lot of time on it! 🙏

Add social icons (Header + Footer)

• X -> nuxt_js
• GitHub -> nuxt-ui-pro/landing

Accessibility: Elements with visible text labels do not have matching accessible names

Visible text labels that do not match the accessible name can result in a confusing experience for screen reader users. Learn more about accessible names.

Add SEO Meta

Leverage useSeoMeta in app.vue (global data: ogUrl, twitter image summary) and in pages/index.vue for specific

Also would be nice to have a default social card like on the main UI Pro docs:

[Header] Add scrollspy on links

Blocked by nuxt/ui@83631cc release.

<script setup lang="ts">
const { activeHeadings, updateHeadings } = useScrollspy()

const links = computed(() => {
  return [{
    label: 'Features',
    to: '#features',
    icon: 'i-heroicons-cube-transparent',
    active: activeHeadings.value.includes('features') && !activeHeadings.value.includes('pricing')
  }, {
    label: 'Pricing',
    to: '#pricing',
    icon: 'i-heroicons-credit-card',
    active: activeHeadings.value.includes('pricing') && !activeHeadings.value.includes('testimonials')
  }, {
    label: 'Testimonials',
    to: '#testimonials',
    icon: 'i-heroicons-academic-cap',
    active: activeHeadings.value.includes('testimonials') && !activeHeadings.value.includes('pricing')
  }, {
    label: 'FAQ',
    to: '#faq',
    icon: 'i-heroicons-question-mark-circle',
    active: activeHeadings.value.includes('faq')
  }]
})

onMounted(() => {
  updateHeadings([
    document.querySelector('#features'),
    document.querySelector('#pricing'),
    document.querySelector('#testimonials'),
    document.querySelector('#faq')
  ])
})
</script>

[Content] Can't break line on YML

Hi 👋

User of the landing template, I would like to break line on my content displayed on the FAQ module, in order to have multiple lines answer.

Since this is YAML, I've tried several common ways to do so in the index.yml file (here), , i.e:

      content: |+
        line1
        line2

      content: |
        line1
        line2

      content: >
        line1
        line2

      content: "Hey\
        line 1\n\n line 2"

etc.

None of these work and I'm running out of ideas for breaking line on my displayed content.
Am I missing something or is it an issue with the template, or eventually Nuxt Content?

Feel free to let me know if something is incorrect.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update devdependency @nuxt/eslint to ^0.3.10

Detected dependencies

npm

package.json

• @iconify-json/heroicons ^1.1.20
• @iconify-json/simple-icons ^1.1.100
• @nuxt/content ^2.12.1
• @nuxt/fonts ^0.6.1
• @nuxt/ui-pro ^1.1.0
• nuxt ^3.11.2
• @nuxt/eslint ^0.3.9
• eslint ^9.1.1
• vue-tsc ^2.0.14

---

• Check this box to trigger a request for Renovate to run again on this repository

-