diff --git a/web-app-vue/src/components/dashboard/controles-dashboard.vue b/web-app-vue/src/components/dashboard/controles-dashboard.vue
index 85db4d3..b8cfc71 100644
--- a/web-app-vue/src/components/dashboard/controles-dashboard.vue
+++ b/web-app-vue/src/components/dashboard/controles-dashboard.vue
@@ -12,19 +12,17 @@
           <!-- receitas x despesas efetivadas (simple-bar) -->
           <v-expansion-panel-title>Receitas x Despesas</v-expansion-panel-title>
           <v-expansion-panel-text>
-            <vue-data-ui
-              component="VueUiSparkbar"
+            <VueUiSparkbar
               :config="receitaDespesaBarConfig"
               :dataset="receitaDespesaTotalPeriodo"
-            ></vue-data-ui>
-            <br/>
+            ></VueUiSparkbar>
+            <br />
             <v-divider></v-divider>
-            <br/>
-            <vue-data-ui
-              component="VueUiSparkbar"
+            <br />
+            <VueUiSparkbar
               :config="receitaDespesaBarConfig"
               :dataset="receitaDespesaEfetivadaPeriodo"
-            ></vue-data-ui>
+            ></VueUiSparkbar>
           </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel value="despesas">
@@ -33,20 +31,12 @@
           <v-expansion-panel-title>Detalhes Despesas</v-expansion-panel-title>
           <v-expansion-panel-text>
             <h3>Despesas por conta</h3>
-            <vue-data-ui
-              component="VueUiDonut"
-              :config="donutConfig"
-              :dataset="despesaConta"
-            ></vue-data-ui>
-            <br/>
+            <VueUiDonut :config="donutConfig" :dataset="despesaConta"></VueUiDonut>
+            <br />
             <v-divider></v-divider>
-            <br/>
+            <br />
             <h3>Despesas por categoria</h3>
-            <vue-data-ui
-              component="VueUiDonut"
-              :config="donutConfig"
-              :dataset="despesaCategoria"
-            ></vue-data-ui>
+            <VueUiDonut :config="donutConfig" :dataset="despesaCategoria"></VueUiDonut>
           </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel value="receitas">
@@ -55,20 +45,12 @@
           <v-expansion-panel-title>Detalhes Receitas</v-expansion-panel-title>
           <v-expansion-panel-text>
             <h3>Receitas por conta</h3>
-            <vue-data-ui
-              component="VueUiDonut"
-              :config="donutConfig"
-              :dataset="receitaConta"
-            ></vue-data-ui>
-            <br/>
+            <VueUiDonut :config="donutConfig" :dataset="receitaConta"></VueUiDonut>
+            <br />
             <v-divider></v-divider>
-            <br/>
+            <br />
             <h3>Receitas por categoria</h3>
-            <vue-data-ui
-              component="VueUiDonut"
-              :config="donutConfig"
-              :dataset="receitaCategoria"
-            ></vue-data-ui>
+            <VueUiDonut :config="donutConfig" :dataset="receitaCategoria"></VueUiDonut>
           </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel value="comps">
@@ -79,23 +61,21 @@
             <h3>Composição de despesas</h3>
             <div v-for="conta in composicaoDespesas" :key="conta.descricao">
               <h4>{{ conta.descricao }}</h4>
-              <vue-data-ui
-                component="VueUiSparkStackbar"
+              <VueUiSparkStackbar
                 :config="sparkStackBarConfig"
                 :dataset="conta.data"
-              ></vue-data-ui>
+              ></VueUiSparkStackbar>
             </div>
-            <br/>
+            <br />
             <v-divider></v-divider>
-            <br/>
+            <br />
             <h3>Composição de receitas</h3>
             <div v-for="conta in composicaoReceitas" :key="conta.descricao">
               <h4>{{ conta.descricao }}</h4>
-              <vue-data-ui
-                component="VueUiSparkStackbar"
+              <VueUiSparkstackbar
                 :config="sparkStackBarConfig"
                 :dataset="conta.data"
-              ></vue-data-ui>
+              ></VueUiSparkstackbar>
             </div>
           </v-expansion-panel-text>
         </v-expansion-panel>
@@ -169,7 +149,7 @@
           <!-- situação dos limites (linhas no plano com a REDLINE do limite da conta / cartão)-->
           <v-expansion-panel-title>Limites</v-expansion-panel-title>
           <v-expansion-panel-text>
-            <vue-data-ui component="VueUiXy" :config="lineChartConfig" :dataset="dataset" />
+            <VueUiXy :config="lineChartConfig" :dataset="dataset" />
           </v-expansion-panel-text>
         </v-expansion-panel>
         <v-expansion-panel value="planejamentos">
@@ -185,7 +165,7 @@
 <script setup>
 import { endOfMonth, startOfMonth } from 'date-fns'
 import { computed, onMounted, ref } from 'vue'
-import { VueDataUi } from 'vue-data-ui'
+import { VueUiDonut, VueUiSparkbar, VueUiSparkStackbar, VueUiXy } from 'vue-data-ui'
 import ChipPeriodo from '@/shared/chip-periodo.vue'
 import { useDashboardStore } from '@/stores/dashboardStore'
 import ChipSaldo from '@/shared/chip-saldo.vue'
@@ -204,10 +184,11 @@ const folha = ref('')
 const dashboardState = useDashboardStore()
 
 const receitaDespesaBarConfig = computed(() => {
-  const total = dashboardState.store.dashboard.receitaDespesaTotalPeriodo?.reduce((acc, e) => {
-    acc += e.value
-    return acc
-  }, 0) || 0
+  const total =
+    dashboardState.store.dashboard.receitaDespesaTotalPeriodo?.reduce((acc, e) => {
+      acc += e.value
+      return acc
+    }, 0) || 0
   return {
     style: {
       ...sparkBarConfig.style,
diff --git a/web-app-vue/src/services/api.js b/web-app-vue/src/services/api.js
index 89b2d5c..242613b 100644
--- a/web-app-vue/src/services/api.js
+++ b/web-app-vue/src/services/api.js
@@ -11,6 +11,7 @@ const req = async ({ method = 'POST', uri, payload }) => {
   const userStore = useUserStore()
   const generalStore = useGeneralStore()
   const url = `${import.meta.env.VITE_API_URL}${uri}`
+  // const url = `//localhost:3000${uri}`
   const headers = {
     'Content-Type': 'application/json',
     Accept: 'application/json'
diff --git a/web-app-vue/src/services/router.js b/web-app-vue/src/services/router.js
index aaf8e5d..a8644f9 100644
--- a/web-app-vue/src/services/router.js
+++ b/web-app-vue/src/services/router.js
@@ -9,7 +9,8 @@ import RecorrenciasPage from '@/pages/recorrencias-page.vue'
 import ContasPage from '@/pages/contas-page.vue'
 import HistoricoPage from '@/pages/historico-page.vue'
 import EditarMovimentacaoPage from '@/pages/editar-movimentacao-page.vue'
-import DashboardPage from "@/pages/dashboard-page.vue";
+
+const DashboardPage = () => import("@/pages/dashboard-page.vue")
 
 export const routes = [
   { component: AuthPage, path: '/auth' },