FreeShare

Cài đặt global nuxtjs với lệnh kiểm tra cài đặt Tạo ứng dụng đầu tiên bằng lệnh ở đây mình chọn vuetifyjs làm framework giao diện chạy yarn dev là chạy lên giao diện demo rồi Thêm config env vào file nuxt.config.js Thêm docker-compose.yml Dockerfile Thêm thư viện vuex

Cài đặt global nuxtjs với lệnh

npm install -g create-nuxt-app 

kiểm tra cài đặt

create-nuxt-app  --version

Tạo ứng dụng đầu tiên bằng lệnh

yarn create nuxt-app 

ở đây mình chọn vuetifyjs làm framework giao diện

chạy yarn dev là chạy lên giao diện demo rồi

Thêm config env vào file nuxt.config.js

env: {
    API_URL: process.env.API_URL || ''
  }

Thêm docker-compose.yml

version: "3"
services:
  nuxt:
    build: .
    container_name: nuxt_demo
    image: nuxt_demo
    restart: always
    ports:
      - "3000:3000"
    command: "yarn start"
    environment:
      API_URL: ""
    network_mode: bridge

Dockerfile

FROM node:14.17.3
ENV APP_ROOT /src
ENV PORT 3000
RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}
RUN yarn install
RUN yarn build
ENV HOST 0.0.0.0

Thêm thư viện vuex

yarn add vuex

Thêm store cho dự án bằng cách tạo file index.js trong folder store

export const state = () => ({
  email: '',
  name: '',
  isLogon: false
})

export const mutations = {
  setLogin(state, email, name) {
    state.email = email
    state.name = name
    state.isLogon = true
  },
  setLogout(state) {
    state.email = ""
    state.name = ""
    state.isLogon = false
  }
}

file layouts/default.vue sửa script như sau

import {mapState} from 'vuex'
export default {
  name: 'DefaultLayout',
  computed: {
    ...mapState([
      'name',
      'email',
      'isLogon'
    ])
  },
  data () {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'mdi-apps',
          title: 'Welcome',
          to: '/'
        },
        {
          icon: 'mdi-chart-bubble',
          title: 'Catgory',
          to: '/category'
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Vuetify'
    }
  },
  methods: {
    logout() {
      sessionStorage.clear();
      this.$store.commit('setLogout')
    },
    login() {
      // dùng axios xử lý login tại đây ở đay mình fake login luôn
      const email = 'email@gmail.com'
      const name = 'Trần Văn A'
      this.$store.commit('setLogin', email, name)
    }
  }
}

giải thích thêm về các vòng đời của một instance trong Vue được mô tả như sau

vuejs lifecycle

có thể download source code mẫu tại đây