Writing nativescript vuejs I have the following structure:
-src/
-- App.vue
-- views/
-- Login.vue
In vuejs we utilize <router-view> in App.vue and use routing to render Login.vue. How do I need proceed using nativescript?
Related
Im working on a CMS, where the CMS ships with Vue2.x installed and a few inbuilt Vue components, Im building custom Vue Components and including them to the page, what i wanted to do is I want to mount my components with the already running vue root node.
for ex : <div id="app"></div> is the root node that all Vue components run, but how can i mount the external component to the same id.
This is the setup :
<script src="vue2x-lib"></script>
<script src="my-vue-components"></script>
I have built some components such as modals and reviews that I want to use and reuse just about everywhere in my site.
I have made a single global.js file in the plugins folder, So iv'e just registered this in my nuxt.config.js file once.
In my global.js file i've imported vue and called the components
import Vue from 'vue';
Vue.component('component-modal', () => import('#/components/modal'));
Vue.component('component-modal-other', () => import('#/components/modalOther'));
Vue.component('component-reviews', () => import('#/components/reviews'));
The reason for this is that now I don't have to do component import on every instance that I want to use it for I just call the component <my-component>.
However I've just switched to Universal mode and i'm now getting hydration warnings that are all coming from my global.js components file that I made in my plugins folder.
Should I not have a global.js file and each component that I want to use globally have it's own file in the plugins folder? Or do I just need to import the component when I need it locally in the file that is requiring it?
What is the best way to re-use and register global mini components that I have created?
Vue Warning
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render
The only way I can avoid this warning is not to put my components into a global.js component file and register it with Nuxt plugins. Only use the component import into each instance which kind of defeats the purpose of global components
try this
import Modal from '#/components/modal'
Vue.component('Modal', Modal)
in your view
</modal>
i am working on a vue project,
on a route for example /app there are components that not using scss.
and on another route for example /admin there are components that using scss.
when i import /app route and its childs in project it creates errors like this:
font-size: $font-size-base;
^
Undefined variable: "$font-size-base".
when i remove /app and its child routes from router file errors will solve and works fine.
i imported scss in /admin parent component to only use scss in this route but it didnt solve the error.
any idea?
Webpack needs to process SCSS when your project runs. You're seeing this on routes because things aren't rendered in Vue until they're called by either a route or a parent component.
Vue can use regular CSS and SASS together. You have to set it up to process the files though.
I'm assuming that you have CSS or SCSS in each template file
<template> ... </template>
<script> ... </script>
<style> CSS or SCSS rules </style>
In that case you need to tell Vue to preprocess the stuff inside the style tags. Do that with the lang attribute in the template where you have SCSS.
<style lang="SCSS"> ... </style>
You also need to include the node-sass and sass-loader packages.
Note: You need to define the SCSS variable $font-size-base in the component that uses it since by default each template is self-contained.
i was using require to address an image file in one of my components. that was the problem.
I am developing a web app using laravel and vue . Now i want to use laravel config file data like app name inside vue component . How do i suppose to do that ?
We can pass config data as props to vue component.
Our case is:
Vue.js
Vuex
Vue Router
Single File Components
Vue Router repo has examples for Nightwatch.js E2E testing, but not for single file components.
When we tried, the result of tests of loading components, with
.assert.elementPresent
where not consistent. We tested clicking a router-link and looked for loading the corresponding single file component (SFC). That is, the current component was replaced on the page by the loaded component.
Our navigation is through a Vue Material drawer drawer. But we believe this is not ann essential element. But we may be wrong here.
Was someone able to get consistent results of tests of loading of such components?