Posts

Can we transfer a vue.js project to a nuxt.js project and how?

Hi everyone clearly can we transfer a vuejs application to nuxt.js without worry or by copying and pasting the views and component images without destroying all ?? and nuxt.js he solves the problem of SEO and google bots knowing that for the moment j no backend and that the data in front is fixed ?? this question is for people experimenting with nuxt.js and vue.js Thanks to you #1 Answers Your question is very relative. I'll try some tips for you, and maybe you can look at the options. Nuxt is a framework, it works in a pre-defined way, you need to create the structure of your code inside an appropriate folders. Example are the stores, layouts, the pages or the components... So, let's assume that you have a vue component and need to migrate it to NuxtJs. The code inside the component is a little different, but not so much, because in the vue you need to declare the vue instance, and import the things to render, since Nuxt does this in an automated way, you will not creat...
Post a Comment
Read more

Display Flex Property is not Taken On Vue Scoped scss , Why?

hi i have following code with vue formulate form <template> <div class="repeatable-container"> <FormulateForm> <FormulateInput type="text" label="strength" placeholder="strength" /> <FormulateInput type="select" label="Quantity" placeholder="strength" /> <FormulateInput type="select" label="Method of intake" placeholder="strength" /> <span>Remove Dossage</span> </FormulateForm> </div> </template> <script> export default { name: "RepeatableGroup", }; </script> //When scoped on style flex property of .formulate-input-wrapper is not taking but it takes if i remove it ,Can any body got idea? <style lang="scss" scoped > .repeatable-container { .formulate-form, .formulate-input-wrapper { display: flex !importan...
Post a Comment
Read more

run script before html is loaded vuejs

I want to test if the user has login or not, if not he will return to login page. I want the script that check if the user has login to be executed before html (or template) load. I have tried beforeCreate() and other things, but html still load before the script run. this is my code if(sessionStorage.getItem("email") == undefined) location.href = "/"; edit I made this vue project using CLI so I dont have the normal index.html with head and body where i can simply add script anywhere outside vue. #1 Answers try checking if your condition matches before initiating vue instance and initiate it after satisfying the condition like this: if(sessionStorage.getItem("email") == undefined) { location.href = "/"; } else { var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) } #2 Answers It isn't considered "best practice" to implement security code using JavaScript...
Post a Comment
Read more

ECONNREFUSED when dispatch action in nuxtServerInit

Image
I am converting my Nuxt application to SSR - because I want to use nuxtServerInit and asyncData . These are the steps I have taken to convert it. Remove ssr: false from nuxt.config.js Dispatch actions to initialize store's state in nuxtServerInit inside store/index.js Now my nuxt.config.js looks like this require("dotenv").config({ path: `.env.${process.env.NODE_ENV}` }); export default { router: { base: "/app/", }, target: "static", head: { // Some head, meta, link config }, css: ["@/assets/scss/main.scss"], styleResources: { scss: ["@/assets/scss/*.scss", "@/assets/scss/main.scss"], }, plugins: ["@/plugins/apiFactory.js"], components: true, buildModules: [ "@nuxtjs/eslint-module", ["@nuxtjs/dotenv", { filename: `.env.${process.env.NODE_ENV}` }], ], modules: [ "bootstrap-vue/nuxt", "@nuxtjs/style-resources",...
Post a Comment
Read more

How do I get self.request.user in DRF from a request in vue.js?

how do I get self.request.user in DRF from a request in vue.js? My request from .vue : async LoadCase() { this.case = await fetch( `${this.$store.getters.getServerUrl}/casedetail/${this.slug}` ).then(response => response.json()) } My class in views.py : class DetailCase(RetrieveAPIView): queryset = Case.objects.all() serializer_class = CaseDetalSerializers lookup_field = "slug" My class in serializers.py : class CaseDetalSerializers(serializers.ModelSerializer): possible_open = serializers.SerializerMethodField() class Meta: model = Case exclude = ("id","slug") def get_possible_open(self,case): request = self.context.get('request') print(request) print(request.user) What I get from print : <rest_framework.request.Request: GET '/api/v1/casedetail/rofl'> AnonymousUser Right now I'm getting the AnonymousUser for some reason, and I should be gett...
Post a Comment
Read more

How to limit pagination buttons in Vue?

I have a pagination component that receives totalPages and currentPage props and then renders buttons that change the currentPage . The problem is that right now if I have many products, I render too many buttons and I want to limit the amount of buttons to 5 - the two previous pages, current page and the next two pages. So if my current page is 4 , I'd see buttons for pages 2, 3, 4, 5, 6 and have the current page always be the middle button ( except when that's not possible ). I'm not quite sure how to handle that though, especially the corner cases when the currentPage is either first/second or second-to-last/last. <template lang="html"> <div class="pagination"> <div v-for="page in totalPages"> <div class="page" :class="{ active: page == currentPage}" @click="setCurrentPage(page)">{{ page }}</div> </div> </div> </template> ...
Post a Comment
Read more

multiline text using vuejs i18n

I'm using i18n single file component to have translation support on my application. To do so, I'm using the tag as following <i18n> { "fr": { "text": "blabla in french blabla bla" }, "en": { "text": "blabla in english bla" } } </i18n> But I have multiple lines text with html formating, how can I use language handling for long html text ? #1 Answers Try implementing the below lines of code, as it worked for me: <i18n> { "fr": { "text": "blabla in french <br /> blabla <br /> bla" }, "en": { "text": "blabla in english <br /> bla" } } </i18n> <span v-html="$t('text')"></span> #2 Answers You could always use backticks: <i18n> { "fr": { "text": `blabla in fr...
Post a Comment
Read more