Just a quick question
Any user can see and access the data we use in the Vue model via Vue Devtool.
Imagine you have an employee list saved in Vue Obj and the user can see all other employees' emails etc..
Is there a way to hide data from the user browser devtool? Make sure devtool only shows development mode.
Thanks for the help.
When you are building a SPA project using vue CLI, the vue dev tools is disabled in production through webpack build by default but when you use vue in a HTML page like a MVC project which vue is added to some of its .cshtml files it isn't disabled, and you might need to configure it manually to make it disable.
you can do this by adding the line below before making your vue instance, I mean before new Vue({ ... }), add:
Vue.config.devtools = false
(worked in a MVC project)
and here is an article for this:
disable vue devtools in production
Related
I recently started learning NuxtJs and create a nuxt app using the nuxt3 template. The code i used to generate the starter project is
npx nuxi init nuxt-app
However the the terminal shows that the app has been created and the dev server also starts displaying the Nuxt3 welcome page. But when i load the directory in vs code the folders like pages,store and components are not visible as seen in the screenshot below .
You are importing <NuxtWelcome /> component from node_modules folder. Delete it and replace with <NuxtPages/>. Create your own components in folder pages. Nuxt 3 imports components by itself, so you don't see them in <script> tag. <NuxtPages /> will do the magic with components in page folder. For example, Index.vue component you will see in / home page and About.vue in /about.
This behavior is a year old already: Some of the directories are missing when I'm trying to create a new Nuxt js project
The idea is to have something minimal where you could then add all the needed directories.
Benefit being that if you don't use any pages, the final bundle will be smaller (no need to being in Vue router for example). Same for the store (no need to import Vuex/Pinia), server part etc...
It's less of a "you have everything from the start" and more of a "pick what you like the most"!
I am new to nuxt js. I have a template of nuxt js which I am working on. In router.js I added some new routes, that's working fine, but when I run my development server again npm run dev, the updated code is just removed. I see the old code there. And it only does for the .nuxt folder. Not for the vue components.
Can anyone suggest something? Thanks.
Nuxt uses a method called File system routing, with that routes.js file is automatically generated according to your configuration and pages created, that is why your changes get removed
If you have a specific requirement that need more customization you can extend the router config
I have a #vue-cli generated project that I need to port over to a simple "three file" setup (ie only index.html, index.js, and index.css) so I can showcase portions of it on Codepen.
However, I'm having a hard time disentangling the "cli" structure of the app. The main issue seems to be two-fold:
CLI is wired to use single-file components whereas Codepen expects everything to be included "in-line" within the js file
Webpack is working its magic in the background to compile everything together based on CLI's single-file component structure, etc.
For example, within the main.js file, a CLI app imports various Vue related modules, then initializes the Vue instance with
new Vue({
render: h => h(App)
}).$mount('#app')
This, of course, corresponds with the content of the index.html
...
<div id="app"></div>
Right now I'm manually copying and pasting things over into Codepen, but that dev environment is just atrocious for any type of serious editing and manipulation... So that's why I'd like to build it out and test stuff OUTSIDE of Codepen, then paste it all in once I'm happy with the results.
I've tried pulling all of the component code into main.js using the standard Vue.component('<name>', { <options> }) syntax, but it's not playing well...
Any ideas? Thanks for the help, sorry for such a broad question!
PS: OR! Maybe I'm going about it the wrong way. Rather than try to "de-CLI" a CLI app structure, how could I create a simple "three-file" Vue app with the comforts of things like npm run serve with hot-loading to see things in action on the page?
I write a simple Nuxtjs project. Based on what I learned from Nuxtjs documents and my experience while testing it, I could not understand the difference between 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs'
For example in the following page:
// pages/index.vue
<template>
<div class="userip">{{userip}}</div>
</template>
<script>
export default {
data() {
return {
userip: 'in process ...'
}
},
async asyncData() {
let res = await fetch("https://api6.ipify.org?format=json")
.then(response => response.json());
return {userip: res.ip}
}
}
</script>
if I run the following command:
cmd: nuxt generate
while Nuxtjs is configured in universal mode, it gives me pre-rendered files that also has SPA functionalities on the user's browser. For example, the file after the build is like the following:
// dist/index.html
<body>
...
<div class="userip">14.182.108.22</div>
...
</body>
and when I run
cmd: nuxt start
or
cmd: nuxt dev
without generating prerendered files, then it makes a real SSR which gets rendered on every request. And now if I run the following:
cmd: nuxt generate
while in the SPA mode of Nuxtjs, it gives me some unrendered SPA files (like building the Vuejs project without even using Nuxtjs). The following is an example output:
// dist/index.html
<body>
...
<div id="__nuxt"><style>#nuxt-loading { ... } ...</style></div>
...
</body>
which even doesn't contain components rendered inside.
And in live mode (without generating prerendered files),
cmd: nuxt start
or
cmd: nuxt dev
which serves unrendered files to the client.
So, what is the difference between a Vuejs project which uses the SPA mode of Nuxtjs and one that does not use Nuxtjs at all?
SSR is only one advantage for me when using Nuxt.
There are still a few things left when you use Nuxt in SPA mode:
You don't have to care about routing just create components in pages folder
Easier way of loading data into your components with asyncData or fetch methods
Easy setup of Vuex including automatically namespaced store modules
In general it provides a more structured way of developing Vue.js applications.
Nuxt js is going to have basic advantages over vuejs as it is a framework which is build using vuejs where Vue.js is an open-source model–view–viewmodel JavaScript framework for building user interfaces and single-page applications only.
Nuxt.js is a frontend framework built upon Vue.js that offers great development features such as server side rendering, automatically generated routes, improved meta tags managing and SEO improvement.
Basic difference can be:
Nuxt js created routes for you by itself, just create component inside the pages folder and you're done. This automation of declaring routes can be done in vuejs as well but definitely you are required to code for that.
Structured Project: One of the biggest drawback (you can say that), of vuejs is that, it is not having any standardized folder structure which nuxtjs defines.
Easily set up transitions between your routes (declare the css in the main.css file present in the assets folder).
Easy setup of Vuex.
Nuxt can be used univeral apps (SSR), static generated apps, and single-page apps.
As mentioned above, Nuxt comes built in with all sorts of benefits, such as Vuex, Vue Meta, and Vue Router. It also scaffolds your file structure and allows you to easily configure your project with modules and plugins in the nuxt config file. For SPA's, there's also the option of using Nuxt as a middleware.
https://nuxtjs.org/guide/
In fact, Nuxt js is good for SSR. Vuejs does not have SSR capability and is difficult to implement. SSR means Server Side Rendering. When it uses ssr, your requests are called to the server and compiled and finally sent to the page!
We may not be able to understand it exactly. But to test and understand this, first use data () in your pages, and after running the project, take a view source on your site and it will be noticed that your site has only loaded the content of the header and footer and the content of your pages is hidden. If you create a project this way, it is better to do the same Vuejs !!! The correct way is to use asyncData Or Fetch on the pages to show you the full meaning of SSR. After using asyncData, compare your output as before !!
Also, if you want to use asyncData, the project type must be
Universal
Good luck
I want to create a website with two separate applications which share some components and store.
index is the public application where I want to use nuxt.js to have SSR.
admin should be a classic SPA where SSR is not needed.
My first idea was to create a multi-page vue application as described in the vue-cli docs at https://cli.vuejs.org/config/#pages
However I'm unsure if this feature fits my needs and if it's possible/advisable to have a nuxt.js app alongside a bare vue.js application, because nuxt.js has a different project structure.
Is there any way to configure nuxt.js so it fits in the default project structure of vue or to configure vue to use the nuxt.js folder structure?
Create multiple Vue Applications with (some) shared source-files (components/store/mixins/etc)
It is easily possible to share resources across multiple Vue-Apps simply by importing the respective resource everywhere you would like to use it, e.g.:
// in /components/MyComponent.vue
<template>
<div>I'm a shared component</div>
<template>
// in /user-app/entry.js
import MyComponent from '../components/MyComponent';
Vue.component('MyComponent', MyComponent);
new Vue({...})
// in /admin-app/entry.js
import MyComponent from '../components/MyComponent';
Vue.component('MyComponent', MyComponent);
new Vue({...})
Where it becomes a little bit complicated
To actually create the seperate apps you will have to use some built-process. By far the most common tool to build Vue apps (and the one used by VueCLI & Nuxt) is WebPack.
To create multiple apps with WebPack you need to do one of two things:
simply use the integreated build-processes of the VueCLI and Nuxt separately. It will work out of the box.
create your own WebPack configuration & the EntryPoint of every single app in WebPack's configuration. NOTE: It is not trivial to use your own build-process for Nuxt, if you really want to use Nuxt I advice you against it. Run with two seperate build-processes instead.
The WebPack configuration itself is a JavaScript Object. The relevant key to declare your EntryPoints is sensibly called entry. Here you specify the name of your EntryPoint and the corresponding path (the path to the entry-file).
The 'Pages' feature of the VueCLI uses this under the hood. However, I believe it is very well worth it to learn how to use WebPack yourself. It is not that complex and will significantly benefit most or all of your JavaScript projects.
A basic example configuration could look like this:
// in webpack.config.js
module.exports = {
mode: 'development',
entry: {
admin: path.resolve(__dirname, './admin-app.js'),
user path.resolve(__dirname, './user-app.js'),
},
// other config
}
WebPack is very well documented: https://webpack.js.org/concepts/