I have a Vue app with with Nuxt and I am instrumenting it with Amplitude. I have already installed nuxt-amplitude via npm and actually I can log in .vue modules using
this.$amplitude.getInstance().logEvent('event')
But now I want to log from a .js file in a vue store module but it doesnt work. Any idea?
I tried using
this.$amplitude.getInstance().logEvent('event')
this.$nuxt.$amplitude.getInstance().logEvent('event')
amplitude.getInstance().logEvent('event')
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 have a PHP project that uses Kirby CMS. I also use Gulp for building my assets. Now, I need to add a calculator on the homepage that is complex enough to justify the usage of Vue. How would I incorporate Vue in my project without introducing a ton of new tooling? All I want is a simple Single File Component basically. I have:
<div id="calculator"></div>
and I want the component to be rendered there. Nothing more.
After some consideration, I came up with the following options but found issues with each of them:
Use the Vue CLI for instant prototyping. That's the closest solution for my use case, but I can't easily develop the component. If I use vue serve, I get to see the component isolated in a new page. The issue lies in the fact the component isn't a part of my project's page. It's not affected by its stylesheets, layout, and other scripts. I can't know if it'll work properly once I build it and view it in my project. Running vue build on each change would be pretty painful and time consuming. Sadly, vue watch isn't a thing, which leads me to:
Creating a project and using Vue CLI Service. If I create a project, I'd be able to run vue-cli-service build --watch and have my component automatically refresh on each change of its source file. While developing the component, I simply make a change, wait for it to compile, and refresh my project in the browser to see the modified component in action. While that would work, it introduces a bunch of node_modules inside my project, along with a package.json. I feel that's too much for just a single component. It would pollute the project more than I'd like:
assets/
js/
build/
calculator/
dist/
node_modules/ # modules here
public/ # I don't need that
package.json # package here
package-lock.json
App.vue
scripts/
main.js
content/
site/
node_modules/ # modules here as well
panel/
package.json # package here as well
package-lock.json
index.php
I would basically have a project within a project.
Use vueify to compile the component with Browserify and Gulp (which I already use). While this appears OK, vueify is deprecated and not supported. Besides, I'd have to add a bunch of stuff to my gulpfile.js in order to use Babel + ESLint for the component.
How do I set up Vue in such a way that I'm able to develop a very simple component as a part of a larger project with as little friction as possible?
If anyone has dealt with a similar problem, how did they solve it?
I ended up using the second approach I mentioned in my question with one small twist - I initialized the Vue project in my main project. I merged them.
I opened the parent folder of my project in a terminal.
I ran vue create my-project where my-project was the actual folder name of my project. The CLI asked if it should overwrite the project or merge it. I chose merge.
After the project was created, my old package.json was overwritten and only had the Vue dependencies listed in it.
I reverted my old package.json and installed these packages: #vue/cli-plugin-babel, #vue/cli-service, vue-template-compiler, and vue.
I added the following npm script in my package.json:
"scripts": {
"calculator": "vue-cli-service build assets/js/calculator/main.js --watch --dest assets/js/calculator/build"
}
Result
My project's folder structure remained the same, except for a few new packages in node_modules. I put my component files in assets/js/calculator/. There, I have main.js which is the main component script, and build which is a folder containing the processed component.
I have:
<div id="calculator"></div>
in my page, and:
<script src="/assets/js/calculator/build/app.js"></script>
in the footer. When I open the page, the component is rendered correctly.
To modify the component, I simply run npm run calculator in a terminal, which spins up the CLI service. It monitors the main.js file and builds the component on each change. Once the build is complete (which happens in under a second), I refresh the page and the updated component is there.
Conclusion
I believe that's the smoothest way to handle this use case. It didn't bloat the project, all dependencies were listed, and the development experience is great. The part where my package.json got overwritten was a bit concerning, but other than that - it worked perfectly. If there's a better way to do this, please leave an answer!
This is probably not the answer you're looking for but if I were you I'd look into inline templates and x-templates as they seem well suited to your use case.
Also have a look at this blog post. It offers a nice write up about the different template authoring methods in Vue and their pros/cons.
I don't know how this vuejs project render data to the web browser. Can anyone help me to explain this?
Link url: https://github.com/huytrongnguyen/vue-cms
Notice: you have to clone this project to your computer.
Vue loader in the webpack config will change all of the components into Javascript. That JS is loaded when the index.html in the dist folder is opened in a browser. After the javascript is parsed, it'll run and populate the DOM with HTML strings created by the webpack process
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?