Skip to main content

​
Get Started in Minutes

This guide will walk you through setting up the Service Orders Management System from installation to creating your first service order.
1

Install Dependencies

First, clone the repository and install all required dependencies.
npm install
The postinstall script will automatically run nuxt prepare to set up your development environment.
Ensure you have Node.js 16.x or higher installed on your system.
2

Configure API Endpoint

The application connects to a backend API for authentication and data management. Configure the API base URL in nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBaseUrl: 'http://localhost:8000/api/'
    }
  }
})
You can override this setting using the NUXT_PUBLIC_API_BASE_URL environment variable without modifying the config file.
For production deployments, set the environment variable:
.env
NUXT_PUBLIC_API_BASE_URL=https://api.yourdomain.com/api/
3

Start Development Server

Launch the Nuxt development server with hot module replacement:
npm run dev
The application will be available at http://localhost:3000.
The development server includes auto-import for components, composables, and Vue Router pages. No manual imports needed!
4

Authenticate

Navigate to http://localhost:3000 to access the login page. The authentication system uses JWT tokens for session management.Login Flow:
  1. Enter your email and password
  2. The system validates credentials with the backend API
  3. Upon successful login, a JWT token is stored in localStorage
  4. You’re redirected to the service orders dashboard at /serviceorders
Here’s how authentication works under the hood:
pages/index.vue
const checkLogin = async () => {
  validateForm()
  
  if (!formFlag.value) {
    return
  }
  
  await api.post('/login', form.value).then(
    (response) => {
      localStorage.setItem('access_token', response.data.access_token)
      window.location.href = '/serviceorders'
    }
  ).catch(
    (error) => {
      if (error.response.data.message) {
        alert(`Validacion Incorrecta: ${error.response.data.message}`)
      } else {
        alert(`Validacion Incorrecta`)
      }
      
      form.value.email = ""
      form.value.password = ""
    }
  )
}
The backend API must be running and accessible at the configured apiBaseUrl for authentication to work.
5

Create Your First Service Order

Once authenticated, you can create and manage service orders:
  1. Click the Nuevo (New) button on the service orders page
  2. Fill in the service order details:
    • Order number
    • Service type (garantía, reparación, mantenimiento)
    • Part number and serial number
    • Description of the issue
    • Company and contact information
    • Equipment type
    • Delivery conditions
  3. Save the order to persist it to the backend
The system uses the useServiceOrders composable for state management:
composables/useServiceOrders.ts
export const useServiceOrders = () => {
  const serviceOrders = ref<ServiceOrder[]>([])
  const selectedOrder = ref<ServiceOrder>(getEmptyOrder())
  
  function openModal(isNew: boolean, orderObject: any = null) {
    selectedOrder.value = isNew ? getEmptyOrder() : orderObject
  }
  
  return {
    serviceOrders,
    selectedOrder,
    openModal
  }
}
Service orders include comprehensive tracking for companies, contacts, equipment, and solutions - all managed from a single interface.

​
What’s Next?

Now that you have the Service Orders Management System running, explore these features:

Service Orders

Learn how to create, edit, and track service orders

Companies & Contacts

Manage company information and contact details

Equipment Management

Track equipment with part numbers and serial numbers

API Integration

Understand how the frontend connects to the backend

​
Troubleshooting

If you’re getting connection errors:
  1. Verify your backend API is running
  2. Check the apiBaseUrl in nuxt.config.ts matches your backend URL
  3. Ensure CORS is properly configured on your backend
  4. Check browser console for detailed error messages
Common issues:
  • Backend API endpoint is incorrect
  • Backend is not returning the expected response format ({ access_token: "..." })
  • Network connectivity issues between frontend and backend
  • CORS blocking the request
If service orders don’t appear after login:
  1. Check that your JWT token is stored in localStorage
  2. Verify the token is being sent in the Authorization header
  3. Ensure the /service-orders endpoint is accessible
  4. Check the browser console and network tab for errors

​
Additional Resources

Project Structure

Understand the Nuxt 3 application architecture

State Management

Learn about Pinia stores and composables

Build docs developers (and LLMs) love

Get started for freeTalk to us