Hi I am trying to fetch the value for "customerID" and "iot" in MyIOT.vue. When I enter the url http://localhost:8080/5/345435 it gives me an empty value for params. I tried both ways using routing and props. None of them is working. Not sure where I am getting it wro
main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import MyIot from './components/MyIOT.vue'
//import router from './router/index.js'
const routes = [
// {
// path: '/',
// redirect: '/:customerID/:iot'
// },
{
path: '/:customerID/:iot',
component: MyIot,
//props: true,
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp(App).use(router);
app.mount('#app');
App.vue
<template>
<MyIot />
</template>
<script>
import MyIot from './components/MyIOT.vue'
//import axios from "axios";
export default {
name: "App",
components: {
MyIot,
},
};
</script>
components/MyIOT.vue
<template>
<div>customer id is: {{customerID}} and iot is : {{iot}}
</div>
</template>
<script>
import { useRoute } from 'vue-router'
export default {
name: 'MyIot',
//props: ['customerID', 'iot'],
setup() {
const route = useRoute();
console.log(route.params);
}
}
</script>
Related
Below is how I registered one Vuex store in app.js.
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import store from '#/Pages/Users/Store'; // Vuex Store, Users module
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(store)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
Below is the Pages/Users/Store/index.js.
import { createStore } from "vuex";
export const store = createStore({
state: {
count: 123,
name: "My name"
}
});
export default store;
Below is how I use the Vuex store state in a module's component Pages/Users/Index.vue.
<script>
import { mapState } from "vuex";
export default {
computed: mapState({
count: state => state.count,
name: state => state.name,
email() {
return "hello#world.com";
}
})
};
</script>
<template>
<div>
{{ email }} {{ count }} {{ name }}
</div>
</template>
If I have many pages and many modules such as Users, Chirps, Customers, each module for each page. How can I load and use only the Vuex Store of that module when Inertia renders that Vue component of an individual page?
Hey everyone laravel 9 vue 3 and vue-router the problem is that localhost:8000/api/admin/login is not available. Transition opens non-existent vue components page Can you suggest how to exclude api prefix from vue router.
Backend: Laravel 9
PHP: 8.0
Fronted: Vue3,axios, vue-routera
web.php
Route::get('{any?}', function () {
return view('welcome');
})->where('any', '.*');
api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\API\Admin\UserController;
Route::any('login', [UserController::class, 'login']);
Route::any('register', [UserController::class, 'register']);
Route::group(['middleware' => 'auth:api'], function () {
Route::get('logout', [UserController::class, 'logout']);
Route::get('user', [UserController::class, 'user']);
});
app.js
import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(ElementPlus)
app.use(router, axios)
app.config.globalProperties.$axios = axios
app.mount("#app")
router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Main/HomeComponent.vue';
import Login from './components/Main/LoginComponent.vue';
import Dashboard from './components/Main/DashboardComponent.vue';
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: false,
title: 'Home',
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
requiresAuth: false,
title: 'Login',
}
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
meta: {
requiresAuth: true,
title: 'Dashboard',
}
}
]
const router = createRouter({
history: createWebHistory(),
mode: 'history',
routes,
linkExactActiveClass: 'active'
});
// eslint-disable-next-line no-unused-vars
router.beforeEach((to, from) => {
document.title = to.meta.title;
if (to.meta.requiresAuth === true && !this.$store.authenticated) {
return this.$router.push('/login');
}
})
export default router
In the end, calling api route.php worked correctly
I'm trying to run a component unit test on Nuxt 3 but I get an error telling me that the component cannot be found..
FAIL test/components/button.test.ts [ test/components/button.test.ts ]
Error: Failed to resolve import "#/components/Texts/Button/ButtonText.vue" from "components\Button\Button.vue". Does the file exist?
button.spec.ts
import {test, expect} from 'vitest';
import {mount} from '#vue/test-utils';
import Button from "../../components/Button/Button.vue";
test('Button Component', async () => {
const button = mount(Button, {
props: {
text: 'My Test Button'
}
});
expect(button.text()).toEqual('My Test Button');
});
Button.vue
<template>
<div class="Button">
<slot name="left" />
<ButtonText :text="text" />
<slot name="right" />
</div>
</template>
<script lang="ts">
export default {
name: 'Button',
components: {ButtonText},
props: {
// Text to display in the button
text: {
type: String as () => string,
default: 'Button',
required: true,
},
}
}
</script>
any ideas ?
Assuming, that #/components/Texts/Button/ButtonText.vue actually exists, a solution to your problem might be adding aliases to your ./vitest.config.ts like that:
// vitest.config.ts
import { defineConfig } from 'vite'
import { aliases } from './aliases'
export default defineConfig({
resolve: { aliases },
// ... further settings
})
// aliases.ts
import { resolve } from 'path';
const r = (p: string) => resolve(__dirname, p);
export const alias: Record<string, string> = {
'~~': r('.'),
'~~/': r('./'),
'##': r('.'),
'##/': r('./'),
// ... other aliases
};
I need to find a way to use the $t of i18n within the setup script for my vue project
my i18n file looks like this:
import { createI18n } from 'vue-i18n'
import en from './en';
import es from './es';
const messages = { en, es };
const locales = [
{ code: 'en', name: 'English' },
{ code: 'es', name: 'EspaƱol' }
];
const i18n = createI18n({
locales: locales,
defaultLocale: 'en',
fallbackLocale: 'en',
messages,
silentTranslationWarn: true,
silentFallbackWarn: true,
})
export default i18n
my main js look like this:
import i18n from './lang/settings'
const application = createApp({
render: () => h(app, props)
})
application.use(i18n)
I can perfectly use $t() in the template to translate but I have no clue how to access the same method within <script setup></script>
The i18n resource and the related files need to be placed in the way you have mentioned in your question.
You can use it in this way
I have Added everything in main.ts for better understanding.
you can use it in this way
Main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
locale: 'en', // set locale
messages: {
en: {
sample:{
item1: 'hello world'
}
}} // set locale messages
});
createApp(App).use(router).use(i18n).mount('#app');
In your component
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let name = t('sample.item1');
</script>
<template>
{{name}}
</template>
Delab some code changes Vue3-Vite.
I receive error after reboot page in Vue3.
Uncaught ReferenceError: Cannot access 'router' before initialization
router\index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
]
App.vue
<router-link
to="/"
>
<button
type="button"
class="btn btn-outline-primary mx-4"
>
Home
</button>
</router-link>
router\index.js
import { createWebHistory, createRouter } from "vue-router";
const history = createWebHistory();
const routes = [/* Routes*/];
const router = createRouter({ history, routes });
export default router;
add router in main.js
import router from "./router";
createApp(App).use(router).mount("#app");
At no time does it see how you use a router in your app when it is mounted.
In all cases you should do something like
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import { createApp} from 'vue';
const routes = createRouter([
{
path: '/',
name: 'Home',
component: Home
},
)]
const app = createApp(Home);
app.use(routes);