# prepare configurations
$ yarn prepare
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generateFor detailed explanation on how things work, check out the documentation.
Checkout .vscode for code snippets
The project is setup with some simple i18n snippets:
$t('');
$i18n.$t('');
i18n.t('');<i18n lang="yaml">
fr:
Your code: Votre code
</i18n>You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
Components in this directory will be registered globally automatically by this configuration in nuxt.config.js:
components: [
{ path: '@/components/base/' },
],The directory to store your common layout component, such as Navbar, Sidebar, Header, Footer, etc
Place your modules' components, good naming pratice should be something like:
// components/products/Chart.vue
// components/blogs/BlogItem.vueThis directory should should contains your project's constants, enums Javascript doesn't support ENUM type so we can use Object.freeze() to create a true ENUM object.
Our plugins' configuration should be in here, the nuxt.config.js file or in special dedicated files like .eslintrc.js, .prettierrc.js
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
More information about the usage of this directory in the documentation.
The middleware directory contains your application middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layout).
More information about the usage of this directory in the documentation.
This folder contains Vue mixins
We can declare a global mixin with:
import Vue from 'vue';
Vue.mixin({
created() {
var myOption = this.$options.myOption;
if (myOption) {
console.log(myOption);
}
},
});and import it as a plugin in nuxt.config.js or simple export an on-demand mixin in here:
export const myHelpfulMixin = {
created() {
var myOption = this.$options.myOption;
if (myOption) {
console.log(myOption);
}
},
};The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use Vue.use(), you should create a file in plugins/ and add its path to plugins in nuxt.config.js.
More information about the usage of this directory in the documentation.
This folder contains css and scss files, scss files, variables, mixins and functions also got imported to the project globally by using this configuration in nuxt.config.js:
buildModules: [
// https://www.npmjs.com/package/@nuxtjs/style-resources
'@nuxtjs/style-resources',
],
styleResources: {
scss: [
'@/core/styles/scss/_colors.scss',
'@/core/styles/scss/_mixins.scss',
'@/core/styles/scss/_variables.scss',
],
hoistUseStatements: true,
},This directory contains composables files for composition API For more information about Vue composition API, please check out the Vue composition API documentation
Notes:
- Yes, you can ignore Composition API if you like the original option API better.
// Option API component:
export default {
data() {
return {
blogs: 123,
categories: 456,
}
},
created() {},
mounted() {},
}
// Composition API
export default {
setup(props, context) {
// No created hook, setup runs in server-side
const dataBlog = reactive({
blogs: 123,
})
const dataCategory = reactive({
categories: 456,
})
onMounted(() => {
// Do stuff when component mounted
})
return {
dataBlog,
dataCategory,
}
}
}- Vue 2 and Vue 3 Composition API are "almost" the same.
- Nuxt has supercharged Vue Composition API with some cooler features, see the documentation.
This directory contains your helper functions, global mixins, global dicrectives and global filters
/directives, /mixins and /filters are automatically registered using Webpack's require.context().
Files in /functions are imported manually when use to keep the type annotation
This directory contains your global localization and will be imported into nuxt.config.js. We're using YAML file because it has better syntax than JSON
Notes: We translate the website on the go by adding localization on component-level
<template>
<h1>{{ $t('Home page') }}</h1>
</template>
<script>
import { useContext } from '@nuxtjs/composition-api';
export default {
// Composition API
setup() {
const { i18n } = useContext();
console.log(i18n.t('Hello world!'));
},
// Option API
mounted() {
console.log(this.$t('Hello world!'));
},
};
</script>
<i18n lang="yaml">
vi: Home page: Trang chủ Hello world!: Xin chào thế giới! Change language: Đổi
ngôn ngữ
</i18n>This directory contains your application views and routes. Nuxt will read all the *.vue files inside this directory and setup Vue Router automatically.
More information about the usage of this directory in the documentation.
API Routes using Nuxt serverMiddleware so you can protect your original API
This using Nuxt.js server middleware and added in nuxt.config.js:
serverMiddleware: [
{ path: '/api/v1', handler: '@/server' },
],Read more about Nuxt.js server middleware in the documentation.
This directory contains your static files. Each file inside this directory is mapped to /.
Example: /static/robots.txt is mapped as /robots.txt.
More information about the usage of this directory in the documentation.
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
More information about the usage of this directory in the documentation.
This directory contains your dynamic modules for Vuex.
See more information about Vue Dynamic module registeration in the documentation.