I created a blank Ionic Vue project and have the following view where I added an ion-icon element and also the IonIcon import:
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<ion-icon name="home-outline"></ion-icon>
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonIcon } from '#ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Home',
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonIcon
}
});
</script>
But i still can not see the Icon, and im also not getting any error.
You need to import IonIcon component and individual icons seperately as below
in template
<ion-icon :icon="caretUpOutline" />
// please note, not like this <ion-icon name="caretUpOutline"></ion-icon>
import { IonIcon } from "#ionic/vue";
import { caretUpOutline, caretDownOutline } from "ionicons/icons";
export default {
name: "test",
components: { IonIcon },
setup() {
return { caretUpOutline }
}
Try to do so, it helps me and install this package https://www.npmjs.com/package/ionicons
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<strong>Ready to create an app?</strong>
<ion-icon :icon="homeOutline"></ion-icon>
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonIcon } from '#ionic/vue';
import { defineComponent } from 'vue';
import {homeOutline} from 'ionicons/icons';
export default defineComponent({
name: 'Home',
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonIcon
},
data(){
return {
homeOutline,
}
}
});
</script>
Related
I’m developing an app and getting some of the basics down, however, when I copy the tutorial I’m using and copied the official documentation example, I can’t get router link to work at all, it does nothing. I have no idea what I’m doing wrong but it neither make a component clickable or leads anywhere. I know the pages I’ve linked to work and are reachable because I’ve gotten to them by changing the url while testing on Google Chrome. Here is my code.
First Page I’m navigating from
> <template> <base-layout page-title="Student List/MainTemp">
> <ion-list>
> <ion-item router-link="/studentList/1">Billy Click click Click click</ion-item>
> <ion-item>Michael</ion-item>
> <ion-item>Gabby</ion-item>
> <ion-item>Nick</ion-item>
> <ion-item>Virginia</ion-item>
> </ion-list>
> <ion-button router-link="/studentListTest.vue" :router-animation="myAnimation">Click Me</ion-button> </base-layout>
> </template>
>
> <script>
> import { IonButton, IonList, IonItem } from "#ionic/vue";
> export default {
> IonButton, IonList, IonItem
> };
> </script>
Pages I’m tring to navigate to:
<template>
<base-layout>
<h2>the student details</h2>
</base-layout>
</template>
<script>
export default {
}
</script>
Second Test Page
<template>
<base-layout page-title="Student List Test">
<ion-list>
<ion-item router-link="/studentList/1">Jimmyyy tick tick Click click</ion-item>
<ion-item>Michaasdfel</ion-item>
<ion-item>Gabbasdfy</ion-item>
<ion-item>Nickasdf</ion-item>
<ion-item>West Virginia</ion-item>
</ion-list>
<ion-button router-link="/" :router-animation="myAnimation">Click zzMe</ion-button>
</base-layout>
</template>
<script>
import {
IonButton,
IonList,
IonItem
} from "#ionic/vue";
export default {
IonButton,
IonList,
IonItem
};
</script>
Router index.js
import { createRouter, createWebHistory } from '#ionic/vue-router';
import studentList from '../pages/studentList.vue';
import studentListTest from '../pages/studentListTest.vue';
const routes = [
{
path: '/',
redirect: '/studentList'
},
{
path: '/studentList',
component: studentList
},
{
path: '/studentListTest',
component: studentListTest
},
{
path: '/studentList/1',
component: () => import('../pages/studentDetails.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
And the base-layout for extra context
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title> {{ pageTitle }} </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<slot />
</ion-content>
</ion-page>
</template>
<script>
import {
IonPage,
IonHeader,
IonTitle,
IonToolbar,
IonContent,
} from "#ionic/vue";
export default {
props: {
pageTitle: String
},
IonPage,
IonHeader,
IonTitle,
IonToolbar,
IonContent,
};
</script>
Vue Router renders the current paht's component in the router-view component.
Include <router-view></router-view> where you want the content to render.
I got an answer somewhere else I'll post here.
I didn't include this in the script section.
components: {
**insert components here**
}
And that prevented it from working, so here's the script section fixed
<script>
import { IonButton, IonList, IonItem } from "#ionic/vue";
import baseLayout from "#/components/base/baseLayout.vue"; (I exported this globally but I'll include it here anyway)
export default {
components: {
baseLayout,
IonButton,
IonList,
IonItem,
},
};
I am currently working on an AR project with Vue in combination with Ionic. For this I have so far used A-Frame with Ar.js. On my physical device (iPhone) I already get a video output, but the video output is only 1/3 of the device width. The rest is blank.
How do I get the video output to be over the whole device width?
main.ts
import "aframe";
import 'ar.js';
const app = createApp(App)
.use(IonicVue)
.use(router);
router.isReady().then(() => {
app.mount('#app');
});
App.vue
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<script lang="ts">
import { IonApp, IonRouterOutlet } from '#ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
components: {
IonApp,
IonRouterOutlet
}
});
</script>
Home.vue
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<a-scene arscene embedded arjsc>
<a-marker preset="hiro">
<a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '#ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Home',
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
}
});
</script>
<style>
</style>
Nevermind, I decided to take a different approach.
I load ar.js via a static html file which is located in the assets folder.
scene.html
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>-->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs vr-mode-ui="enabled: false">
<a-marker preset="hiro">
<a-box position="-1 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Home.vue:
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>BAAR</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<iframe src="/assets/scene.html" style="position:absolute; width: 100%; height: 100%;"></iframe>
</ion-content>
</ion-page>
</template>
[...]
Source:
Medium
i installed font-awesome into my Vue project exactly like in Docs but i got that error
first i installed it using these commands
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/vue-fontawesome#prerelease
in main.js :
import Vue from 'vue'
import App from './App.vue'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Navbar.vue:
<div class="nav-icons">
<font-awesome-icon icon="user-secret" />
</div>
Using Vue 2 and the CLI, I recently built a Font Awesome test project that works.
IconList.vue
<template>
<div class="icon-list">
<h3>Icon List</h3>
<div class="row">
<div class="col-md-6">
<ul class="list-group">
<li v-for="(iconName, index) in currentIcons" :key="index" class="list-group-item" >
<font-awesome-icon :icon="iconName" class="fa-2x" />
</li>
</ul>
<button v-if="displayMoreBtn" class="btn btn-secondary" #click="showMore" >
<font-awesome-icon icon="ellipsis-h" class="fa-2x" />
</button>
</div>
</div>
</div>
</template>
<script>
import { library } from "#fortawesome/fontawesome-svg-core";
import { faCoffee } from "#fortawesome/free-solid-svg-icons";
import { faCloudMoonRain } from "#fortawesome/free-solid-svg-icons";
import { faEnvelope } from "#fortawesome/free-solid-svg-icons";
import { faFan } from "#fortawesome/free-solid-svg-icons";
import { faEllipsisH } from "#fortawesome/free-solid-svg-icons";
import { faGuitar } from "#fortawesome/free-solid-svg-icons";
import { faPeace } from "#fortawesome/free-solid-svg-icons";
import { faRobot } from "#fortawesome/free-solid-svg-icons";
library.add(faCoffee);
library.add(faCloudMoonRain);
library.add(faEnvelope);
library.add(faFan);
library.add(faEllipsisH);
library.add(faGuitar);
library.add(faPeace);
library.add(faRobot);
export default {
data() {
return {
initialIcons: ["coffee", "cloud-moon-rain", "envelope", "fan"],
additionalIcons: ["guitar", "peace", "robot"],
displayMoreBtn: true,
currentIcons: [],
};
},
methods: {
showMore() {
this.currentIcons = this.currentIcons.concat(this.additionalIcons);
this.displayMoreBtn = false;
},
},
created() {
this.currentIcons = this.initialIcons;
},
};
</script>
App.vue
<template>
<div id="app" class="container">
<icon-list />
</div>
</template>
<script>
import IconList from '#/components/stackoverflow/font-awesome-list/IconList'
export default {
name: 'App',
components: {
IconList
},
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
// Font Awesome
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
I'm trying to use the color picker from element-ui (http://element.eleme.io/#/en-US/component/color-picker). However it doesn't show up... Any clues about whats wrong?
<template>
<div class="color">
<span class="demonstration">Color picker</span>
<el-color-picker v-model="color"></el-color-picker>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
Vue.use(ColorPicker)
export default {
name: 'color',
data () {
return {
color: '#20a0ff'
}
}
}
</script>
Import the default-theme css too:
<template>
<div class="color">
<span class="demonstration">Color picker</span>
<el-color-picker v-model="color"></el-color-picker>
</div>
</template>
<script>
import Vue from 'vue'
import ColorPicker from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ColorPicker)
export default {
name: 'color',
data () {
return {
color: '#20a0ff'
}
}
}
</script>
Reference: http://element.eleme.io/#/en-US/component/quickstart#import-element
I want to use the vue-material package in my app. I've everything as the docs suggest but my components are not being rendered properly. I am using VueJs 2.x.x
Here is my main.js file:
import Vue from 'vue'
import App from './App.vue'
import state from './state.js'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial)
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
})
new Vue({
el: '#app-container',
components: {
App
}
})
And here is App.vue:
<template>
<div id="app">
<div>Current page: {{currentView}}</div>
<img src="./assets/logo.png">
<transition name="fade" mode="out-in">
<component #stateCPchanged="changeView" v-bind:is="currentView"> </component>
</transition>
</div>
</template>
<script>
import numberPage from './components/NumberPage.vue'
import redirectPage from './components/RedirectPage.vue'
import state from './state.js'
export default {
data () {
return {
currentView: state.currentPage
}
},
components: {
numberPage: numberPage,
redirectPage: redirectPage
},
methods: {
changeView() {
this.currentView = state.currentPage
}
}
}
</script>
<style>
...
</style>
And the page using the plugin:
<template>
<div v-md-theme="'default'"
<md-button class="md-raised">Default</md-button>
</div>
</template>
<script>
import state from '../state.js'
export default {
data(){
return{
message: "this.clientId"
}
},
methods:{
goOtp(){
},
goRedirect(){
state.currentPage = 'redirectPage'
}
}
}
</script>
<style>
....
</style>