I'm using Vue3 and Vite
I want to have some of my pages to have different html file as an entry.
for my entire app
index.html
index.js
but for routes
/product1
product1.html
index.js
/product2
product2.html
index.js
This https://github.com/chriscalo/vite-multipage worked well for me.
It adds the different entry points to the build roll-up.
What is nice about it for me, is I can reuse my common components in different apps.
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 have a project started with the vue-cli, and i'd love to include a component from a different local folder. I'm not that great at webpack config, so I'm not sure if it's just as simple as adding another path to some config setting. I've looked around in the docs, but everything I'm finding shows me the awesome auto scaffolding that vue init project gives us.
Any ideas?
Here's what the project structure looks like:
webroot/
-wp-content/
-wp-admin/
-wp-includes/
-other PHP classes/
-static/
-vue/
-global-components/ (<- this is where i'd like to put some generic .vue components)
-app1/ (<- this was created by vue-cli and is where i'd like to build a specific vue app for a specific wordpress page/post)
-app2/ (<- this was created by vue-cli and is where i'd like to build a different app for a specific wordpress page/post)
So, you can see there's a bunch of things going on in this repo, and I'd like to be able to reference both the src folder inside app1 and app2, but also have each app reference the global-components folder. I'm not sure that the client would like to push their custom components up to npm, and I don't think they want to build out their own private npm source, so I was hoping for a way to build multiple vue.js applications without copying these components to each individual app.
Any thoughts?