Documentation

Now that you have your project set up, it's time to create your first page.

The pages in a Nuxt application are located in the <app>/pages/ directory. Each file in this directory corresponds to a route in your application, you can create nested directories to create nested routes.
Files can also be named with square brackets to create dynamic routes, everything is well detailed in the Routing documentation on nuxt.com.

This is a basic example of directory structure for your <app>/pages/ directory:

bash

Basic page structure

vue

Discover components

Use the quick search to find the component you need, try it now with ctrl+k (or ⌘+k on mac).

Take a look at the .demo/pages/ folder to see how to assemble your page. You will see that most pages are built with reusable components, some are prefixed by Base, Tairo, Demo and a few with Addon.

  • Base prefix is used for Shuriken UI components, sometimes known as atoms, like buttons, inputs, etc... Ready to use base components.
  • Tairo prefix is used for components that are specific to the project layouts, or reusable components that have no dependencies. Ready to use component Tairo components or components that are specific to a layout (like the sidebar, collapse, etc...).
  • Addon prefix is for components that have external dependencies, like the markdown editor, charts, etc... Components that have external dependencies, you may need to install additional packages and copy them in your project.
  • Demo prefix is used for components that are specific to the demo, like the quick search, widgets, etc... Examples components that are specific to the demo. You can use them as inspiration for your own components.

Useful resources: