How to use Vuetify, Mapbox and DeckGL with Nuxt 3

In this tutorial, we’ll explore how to integrate Vuetify, Mapbox, DeckGL, and Nuxt 3 into a web application. Vuetify is a popular Vue.js framework for building elegant and responsive web applications. Mapbox and DeckGL are powerful tools for creating interactive maps and data visualizations. Nuxt 3, as a modern web framework, provides a solid foundation for building robust web applications. By combining these technologies, you can create a stunning web application with rich map and data visualization capabilities.

Prerequisites:

Before we get started, make sure you have:

1. Basic knowledge of Vue.js and Nuxt.js.
2. Node.js and NPM installed on your system.
3. A code editor of your choice (e.g., Visual Studio Code).

Follow these steps:

Step 1: Create a New Nuxt 3 Project

Before diving into the integration of Vuetify, Mapbox, and DeckGL, we need to set up a Nuxt 3 project. Follow these simple steps to create a new project if you don’t have one already.

npx nuxi init geoglify-app
cd geoglify-app

Step 2: Install Required Dependencies

To utilize Vuetify 3, Mapbox, and DeckGL effectively, you’ll need to install the necessary dependencies. This step guides you through installing these packages into your project.

npm install vuetify@next sass mapbox-gl deck.gl @mdi/font

Step 3: Configure Vuetify 3 as a Plugin

In this step, we’ll set up Vuetify 3 as a plugin in your Nuxt 3 project. This configuration ensures seamless integration and makes Vuetify components available for your application. To get started, open your project in your code editor and follow these steps:

1. Create a plugins directory in the root of your project if it doesn’t already exist.
2. Inside the plugins directory, add a new file named vuetify.js.
3. Paste the following content into the vuetify.js file:

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components,
        directives,
    })

    nuxtApp.vueApp.use(vuetify)
})

Step 4: Configure Nuxt 3 to use Vuetify

Now, let’s configure Nuxt 3 to work seamlessly with Vuetify. This step ensures that Vuetify’s styling and functionality are fully integrated into your Nuxt project. To do this, follow these steps:

1. In your Nuxt 3 project, open the nuxt.config.js file.
2. Inside the nuxt.config.js file, you can replace the existing content with the following code:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Step 5: Configure Main Page

In this step, we’ll create an appealing layout for the main page of your Nuxt 3 project using Vuetify components. This is essential for maintaining a consistent and visually pleasing design throughout your application. To do this, follow these steps:

1. Open the app.vue file in your Nuxt 3 project.
2. Inside the app.vue file, you can replace the existing content with the following code:

<template>
  <NuxtLayout>
    <v-app id="inspire">
      <v-app-bar color="primary">
        <v-app-bar-title>GEOGLIFY</v-app-bar-title>
      </v-app-bar>
      <v-main>
        <NuxtPage />
      </v-main>
    </v-app>
  </NuxtLayout>
</template>

<style>
html,
body {
  overflow: hidden !important;
}
</style>

Step 6: Display Map into Main Page

In this step, you’ll create an index.vue page in the pages directory of your Nuxt 3 project. This page will serve as the main entry point for your application. Follow these steps:

1. Create a pages directory in the root of your project if it doesn’t already exist.
2. Inside the pages directory, add a new file named index.vue. This file will represent your application’s main page.
3. Paste the following content into the index.vue file:

<template>
  <div id="map" ref="map" class="map"></div>
</template>

<script setup>
import { Deck } from "@deck.gl/core";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { ref, onMounted } from "vue";

const DEFAULT_MAP_CENTER = [0, 0];
const DEFAULT_MAP_BEARING = 0;
const DEFAULT_MAP_ZOOM = 2;
const DEFAULT_MAP_PITCH = 0;

mapboxgl.accessToken = 'PUT YOUR MAPBOX TOKEN';

const deck = ref(null);
const currentViewState = ref(null);

const INITIAL_VIEW_STATE = {
  latitude: DEFAULT_MAP_CENTER[1],
  longitude: DEFAULT_MAP_CENTER[0],
  zoom: DEFAULT_MAP_ZOOM,
  bearing: DEFAULT_MAP_BEARING,
  pitch: DEFAULT_MAP_PITCH,
  transitionDuration: "auto",
};

onMounted(async () => {
  await nextTick();

  currentViewState.value = INITIAL_VIEW_STATE;

  let map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v12",
    projection: "mercator",
    interactive: false,
    center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
    zoom: INITIAL_VIEW_STATE.zoom,
    bearing: INITIAL_VIEW_STATE.bearing,
    pitch: INITIAL_VIEW_STATE.pitch,
  });

  deck.value = new Deck({
    parent: document.getElementById("map"),
    layers: [],
    viewState: currentViewState.value,
    onViewStateChange: ({ viewState }) => {
      currentViewState.value = viewState;
      deck.value.setProps({ viewState: currentViewState.value });

      map.jumpTo({
        center: [viewState.longitude, viewState.latitude],
        zoom: viewState.zoom,
        bearing: viewState.bearing,
        pitch: viewState.pitch,
      });
    },
    controller: true,
  });
});
</script>
  
<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>

Step 7: Start Your Nuxt 3 Application

You can now start your Nuxt 3 application to see Vuetify, Mapbox, and DeckGL in action by running the following command in your favorite terminal:

npm run dev

Open http://localhost:3000 in your browser, and you should see your Nuxt 3 application with Vuetify, Mapbox, and DeckGL integrated: