Difference between revisions of "Nuxt"

From RHS Wiki
Jump to navigation Jump to search
(Created page with "=== Create project: === <syntaxhighlight lang="bash"> npx nuxi@latest init <project name> cd <project name> npm install </syntaxhighlight> === Configuration: === nuxt.config...")
Tag: visualeditor
 
m
Tag: visualeditor
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
=== Create project: ===
+
npm is required
 +
 
 +
===Create project:===
 
<syntaxhighlight lang="bash">
 
<syntaxhighlight lang="bash">
 
npx nuxi@latest init <project name>
 
npx nuxi@latest init <project name>
Line 7: Line 9:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
=== Configuration: ===
+
== Project structure and files ==
 +
 
 +
===Configuration:===
 
nuxt.config.(js | ts | mjs) file
 
nuxt.config.(js | ts | mjs) file
 +
 +
===Pages directory===
 +
you create your pages here, each file will be treated as a route, ej: pages/index.vue; pages/index.ts; pages/index.tsx will generate your / route
 +
 +
=== Components directory ===
 +
All this components will be auto imported
 +
 +
=== Layouts directory ===
 +
Here you put common layouts that you want to have on every page like side menu or common header
 +
 +
=== Composables directory ===
 +
Common logic pieces are stored here
 +
<br />
 +
 +
=== app.vue ===
 +
Starting point of your app where routing is defined
 +
<br />
 +
 +
=== Run development server ===
 +
<syntaxhighlight lang="bash">
 +
npm run dev
 +
</syntaxhighlight>
 +
 +
 +
<br />

Latest revision as of 09:50, 18 June 2025

npm is required

Create project:[edit]

npx nuxi@latest init <project name>
cd <project name>
npm install

Project structure and files[edit]

Configuration:[edit]

nuxt.config.(js | ts | mjs) file

Pages directory[edit]

you create your pages here, each file will be treated as a route, ej: pages/index.vue; pages/index.ts; pages/index.tsx will generate your / route

Components directory[edit]

All this components will be auto imported

Layouts directory[edit]

Here you put common layouts that you want to have on every page like side menu or common header

Composables directory[edit]

Common logic pieces are stored here

app.vue[edit]

Starting point of your app where routing is defined

Run development server[edit]

npm run dev